本篇文章小编给大家分享一下vue在自定义组件上使用v-model和.sync代码方法实例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
自定义事件
tips
推荐始终使用 kebab-case 的事件名。(v-on会将事件名自动转换为小写,避免匹配不到)
changeData ×
change-data √
自定义组件的v-model
用法:
父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过v-model="data"进行传递
默认传递的属性名是value,事件名为input。可以在子组件中配置model选项重命名属性名和事件名
子组件props接受名称为value的属性(固定名),通过$emit("input", payload)在子组件即可修改数据,形成双向绑定
// 父组件// 子组件我是dad
{{ dadData }}我是儿子组件
.sync 修饰符
为什么会有这个修饰符?它解决了什么问题?
正常我们父子组件通信是父组件props传参,v-on监听改变数据的事件,子组件通过$emit去触发。
父组件每次都要定义类似的事件函数this.data = newData,如果是一个对象,那么它的每个属性传递过去都要定义相应的事件函数(麻烦重复的代码变多了)
.sync就是用来简化这块的代码
怎么使用.sync?
父组件直接在子组件标签上使用 :name.sync="person.name"
默认发送的处理的事件名为 update:name,name就是你传过去的属性名
如果需要使用属性,子组件可以通过props接收,也可以使用$attr,$parent等获取。注意:props接收过的属性不会出现在当前实例的$attr中
如果需要触发事件,可以使用$emit("update:属性名", payload),也可以使用$listener
使用v-bind.sync="obj"可以把obj对象中的每个属性和事件自动分发给子组件
// 父组件// 子组件我是dad
{{ dadData }}我是儿子组件
{{ something }} {{ girlFriends }}