标签：editor btn javascrip 绑定 使用 属性 template 分析 native
.native / .sync，以及组件属性model@click，基本是无效的。vue中对组件绑定原生事件需要带上原生事件修饰符.native。<div id="app">
<p>this is event example for .native/@<p>
<com-child @click="handleNativeClick">按钮@click</com-child>
<com-child @click="handleNativeClick" @child-btn-click="handelChildBtnClick">按钮@click 和自定义事件@child-btn-click</com-child>
<com-child @click.native="handleNativeClick">按钮@click.native</com-child>
<com-child @click.native="handleNativeClick" @child-btn-click="handelChildBtnClick">按钮@click.native 和自定义事件@child-btn-click</com-child>
</div>const comChild = Vue.extend({
template: `<div>
<button @click="handleBtnClick" >
<slot></slot>
</button>
</div>`,
methods: {
handleBtnClick() {
this.$emit('child-btn-click')
},
},
})
const vm = new Vue({
el: "#app",
components: {
comChild,
},
methods: {
handelChildBtnClick() {
alert("v-on绑定组件自定义事件")
},
handleNativeClick() {
alert('native click')
}
}
})在前面讲解porp时，明确了prop是数据单向下行的绑定，父组件通过porp向子组件传值。
在v-on / $emit中，可以在子组件中触发父组件的事件监听器，以达到子组件向父母组件传值或通信的需要，可视为子组件向父组件的数据单向上行绑定。
所以常常将两者结合起来使用。那这里就会产生一个特殊的情况：父组件通过某个prop向子组件传值，而子组件通过v-on / $emit触发父组件监听器修改的是正是父组件中的这个porp值。
<div id="app">
<p>this is event example for prop and $emit<p>
<P>父组件中的num:{{ num }}</P>
<button-counter :count='num' @child-btn-click="handelChildBtnClick"></button-counter>
</div>const buttonCounter = Vue.extend({
template: `<div>
<button @click="handelIncrease" >子组件点击次数：{{ count }}</button>
</div>`,
props: {
count: Number
},
methods: {
handelIncrease() {
this.$emit('child-btn-click', this.count+1)
},
},
})
const vm = new Vue({
el: "#app",
data: {
num: 0,
},
components: {
buttonCounter,
},
methods: {
handelChildBtnClick(val) {
this.num = val;
},
}
})父子通信传递和修改的都是同一个prop时，Vue提供一个语法糖.sync，可以进行简写:
<div id="app">
<p>this is event example for .sync<p>
<P>父组件中的num:{{ num }}</P>
<!-- <button-counter :count='num' @child-btn-click="handelChildBtnClick"></button-counter> -->
<button-counter :count.sync='num'></button-counter>
</div>const buttonCounter = Vue.extend({
template: `<div>
<button @click="handleIncrease">子组件点击次数：{{ count }}</button>
</div>`,
props: {
count: Number
},
methods: {
handleIncrease() {
// this.$emit('child-btn-click', this.count+1)
this.$emit('update:count', this.count+1)
}
}
})
const vm = new Vue({
el: "#app",
data: {
num: 0,
},
components: {
buttonCounter,
},
methods: {
// handelChildBtnClick(val) {
// this.num = val;
// },
}
})上面注释的内容就是省略的内容，可以看到.sync语法糖就是对父组件绑定自定义事件那部分代码进行了简略，并指定$emit触发的父组件监听事件名必须为update:count的写法。
实际上完全还原.sync的写法是：
<div id="app">
<p>this is event example for .sync update:count<p>
<P>父组件中的num:{{ num }}</P>
<!-- <button-counter :count='num' @child-btn-click="handelChildBtnClick"></button-counter> -->
<button-counter :count='num' @update:count="handelChildBtnClick"></button-counter>
</div>const buttonCounter = Vue.extend({
template: `<div>
<button @click="handleIncrease">子组件点击次数：{{ count }}</button>
</div>`,
props: {
count: Number
},
methods: {
handleIncrease() {
// this.$emit('child-btn-click', this.count+1)
this.$emit('update:count', this.count+1)
}
}
})
const vm = new Vue({
el: "#app",
data: {
num: 0,
},
components: {
buttonCounter,
},
methods: {
handelChildBtnClick(val) {
this.num = val
}
}
})对于v-bind=‘object形式传入一个对象时，实现对象某个属性值的双向绑定，可以简写改成这样：v-bind.sync=‘object‘
对prop各种类型传递写法还不清楚的可以点击查看vue-26-component-prop
<div id="app">
<p>this is event example for .sync object.lnag<p>
<!-- <button-counter v-bind='frontend' @child-change-lang="handleChildChangeLang"></button-counter> -->
<button-counter v-bind.sync='frontend'></button-counter>
</div>const buttonCounter = Vue.extend({
template: `<div>
<p>前端语言：{{ lang }}</p>
<p>前端框架：{{ framework }}</p>
<p>前端编辑器：{{ editor }}</p>
<button @click="handleChangeLang">子组件内点击改变前端语言</button>
</div>`,
props: {
lang: String,
framework: String,
editor: String,
},
methods: {
handleChangeLang() {
this.$emit('update:lang', 'HTML')
}
}
})
const vm = new Vue({
el: "#app",
data: {
num: 0,
frontend: {
lang: "javascript",
framework: "vue",
editor: "vscode",
}
},
components: {
buttonCounter,
},
methods: {
// handleChildChangeLang(val) {
// console.log(val)
// this.frontend.lang = val
// }
}
})在上面.sync实现双向数据绑定时，概念上有一些熟悉，因为之前在基础指令学习时，有一个用于表单元素输入的双向数据绑定指令v-model，总结的时候，提到过这也是一个语法糖而已。
在.sync实现时说过，$emit触发的事件名必须按要求写法update:prop的形式才行。同样的，v-model语法糖实现的前提也必须存在指定的值，默认是特性值是value，绑定的事件名是input。
v-model在绑定原生的表单元素时，会根据表单元素的类型不同，选择对应的特性和事件来实现双向绑定。
那把v-model用在自定义的组件中时，v-model 默认会查找组件中名为 value 的 prop 和名为 input的事件。如果有一个不存在，则无法实现v-model双向绑定的效果。
<!-- 原生表单输入框元素直接用v-model -->
<div id="native-test">
<p>data中iptValue的值是： {{ iptValue }}</p>
<input type="text" v-model="iptValue">
</div>const vm = new Vue({
el: "#native-test",
data: {
iptValue: ''
},
})那如果现在有一个自定义的输入组件,根元素就是一个input元素，在组件在直接绑定v-model是否有效呢？
<div id="app">
<p>显示iptValue的值：{{ iptValue }}</p>
<!-- <input type="text" v-model="iptValue"> -->
<com-input v-model="iptValue"></com-input>
</div>const comInput = Vue.extend({
template: `<input type="text"></div>`,
})
const vm = new Vue({
el: "#app",
data: {
iptValue: '初始值'
},
components: {
comInput,
},
})结果是无效，因为在模板编辑阶段子组件com-input上用v-model时没有在组件身上找到value和input事件。也不会找到内部原生的input。
自定义组件v-model指令
所以根据v-model绑定原生表单组件时的原理，手写一个组件双向输入绑定
<div id="app">
<p>显示iptValue的值：{{ iptValue }}</p>
<!-- <input type="text" v-model="iptValue"> -->
<com-input :value='iptValue' @input="handleComInput"></com-input>
</div>const comInput = Vue.extend({
template: `<input type="text" :value="value" @input="handleInnerIput"></div>`,
props: ['value'],
methods: {
handleInnerIput(e) {
this.$emit('input', e.target.value)
}
}
})
const vm = new Vue({
el: "#app",
data: {
iptValue: '初始值'
},
components: {
comInput,
},
methods: {
handleComInput(val) {
this.iptValue = val
}
}
})这样我们就让组件com-input有了value属性和input事件，此时满足v-model有实现条件。我们就可以在组件上直接使用v-model绑定了
<div id="app">
<p>显示iptValue的值：{{ iptValue }}</p>
<!-- <input type="text" v-model="iptValue"> -->
<!-- <com-input :value='iptValue' @input="handleComInput"></com-input> -->
<com-input v-model="iptValue"></com-input>
</div>所以说，只要我们封装的组件能提供value属性和input事件，就可以对该组件使用v-model指令。而不需要组件内部一定是表单元素。
<div id="app">
<p>显示iptValue的值：{{ iptValue }}</p>
<!-- <input type="text" v-model="iptValue"> -->
<!-- <com-input v-model="iptValue"></com-input> -->
<com-div v-model='iptValue'></com-div>
</div>const comDiv = Vue.extend({
// template: `<input type="text" :value="value" @input="handleInnerIput"></div>`,
template: `<div>
<span @click="handleClick" style="border: 1px solid #000;">点击改变值的显示 {{ value }}</span>
</div>`,
props: ['value'],
methods: {
handleClick(e) {
this.$emit('input', this.value+1)
}
}
})
const vm = new Vue({
el: "#app",
data: {
iptValue: 0
},
components: {
comDiv,
},
})组件的model属性
再进一步讲，v-model指令默认情况下是选择value属性和input事件，那是否像checkbox一样让v-model绑定其它属性和对应的事件呢。
vue 2.2.0以上版本为组件增加一个model对象属性，用来指定v-model绑定自定义的prop和event事件。
<div id="app">
<p>显示iptValue的值：{{ iptValue }}</p>
<!-- <input type="text" v-model="iptValue"> -->
<com-input v-model="iptValue"></com-input>
<com-div v-model='iptValue'></com-div>
</div>const comDiv = Vue.extend({
// template: `<input type="text" :value="value" @input="handleInnerIput"></div>`,
template: `<div>
<span @click="handleClick" style="border: 1px solid #000;">点击改变值的显示 {{ otherName }}</span>
</div>`,
model: {
prop: 'otherName',
event: 'some-event'
},
props: ['otherName'],
methods: {
handleClick(e) {
this.$emit('some-event', this.otherName+1)
}
}
})
const vm = new Vue({
el: "#app",
data: {
iptValue: 0
},
components: {
comDiv,
},
})从上面分析的组件.sync和v-model实现的原理上看，一个组件只能定义一个model属性用业指定prop和event。所以：
比如当v-bind.sync=‘obj‘时，就会把obj对象中的每一个属性 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器，实现对象中每个属性的双向绑定。
vue-learning：28 - component - 组件事件的修饰符`.native / .sync`，以及组件属性`model`
标签：editor btn javascrip 绑定 使用 属性 template 分析 native
原文地址：https://www.cnblogs.com/webxu20180730/p/11031252.html
