事件命名
- 不同于prop会统一的转换成小写
当你$emit() 和v-on 触发和监听的名子一定要统一而且小写
this.$emit('myevent')
<my-component v-on:myevent="doSomething"></my-component>
自定义组件的v-model
- 在一个组件上使用
v-model默认会利用名为value的prop和名为input的事件，在其他表单的组件中value代表的值有有不同的的目的。model属性是 定义不同表单传递value的类型如下
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
//组件上使用v-model
<base-checkbox v-model="lovingVue"></base-checkbox>
/*
这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。
*/
注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。
将原生事件绑定到组件中 .native
<base-input v-on:focus.native="onFocus"></base-input>
- 但是在监听input框的时候有时候并不能起作用如下组件,实际的根组件是在label中所以focus事件会失效也不会报错
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
- 为解决上述问题Vue提供了一个$listteners属性，它是一个对象，里面包含了作用在这个组件上的所有监听器。例如：
{
focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },
}
- 有了这个 $listeners 属性，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 <input> 的你希望它也可以配合 v-model 工作的组件来说，为这些监听器创建一个类似下述 inputListeners 的计算属性通常是非常有用的：
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
computed: {
inputListeners: function () {
var vm = this
// `Object.assign` 将所有的对象合并为一个新对象
return Object.assign({},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器，
// 或覆写一些监听器的行为
{
// 这里确保组件配合 `v-model` 的工作
input: function (event) {
vm.$emit('input', event.target.value)
}
}
)
}
},
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on="inputListeners"
>
</label>
`
})
- 有时候我们需要对prop进行数据双项绑定。但是数据双向绑定会带来委会上的困难，当子组件改变傅组件的值的时候如果依赖的这个父组将的这个值的相关组件都会发生变化。
- 如果需要对prop赋一个新的值 推荐使用upadta:myPropName如下
this.$emit('update:title', newTitle)
//然后父组件可以监听这个事件并且更具事件更新本地的数据
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
//为了方便起见可以使用 .sync修饰符
<text-document v-bind:title.sync="doc.title"></text-document>
注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。
- 当我们使用一个对象同事设置多个prop属性的时候也可以将 .sync修饰符和v-bind配合使用
<text-document v-bind.sync="doc"></text-document>
//这样会把 doc 对象中的每一个属性 (如 title)
//都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
将v-bind.sync用在对象字面量的时候是无法解析正常工作的如 v-bind.sync=”{ title: doc.title }”
