vue的自定义组件（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)在子组件即可修改数据




 




 




 

，形成双向绑定 // 父组件 <template> <div> <p>我是dad</p> <span>{{ dadData }}</span> <Son v-model="dadData" /> </div> </template> <script> import Son from "./SonItem.vue"; export default { components: { Son, }, data() { return { dadData: "我是爹地", }; }, }; </script> // 子组件 <template> <div> <p>我是儿子组件</p> <input type="text" :value="value" @input="sonInput" /> <button @click="btnClick(Date.now())">点击</button> </div> </template> <script> export default { // 如果重命名
   

   

   

，记得这里也要修改哦 props: ["novalue] props: ["value"], // 这里可以重命名接收到的属性值和事件名 // model: { // prop: "novalue", // event: "changeNoval", // }, methods: { sonInput(e) { this.$emit(`input`, e.target.value); }, btnClick(data) { this.$emit(`input`, data); }, }, }; </script>

.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对象中的每个属性和事件自动分发给子组件 // 父组件 <template> <div> <p>我是dad</p> <span>{{ dadData }}</span> <Son :something.sync="dadData" v-bind.sync="dadObj" /> </div> </template> <script> import Son from "./SonItem.vue"; export default { components: { Son, }, data() { return { dadData: "我是爹地", dadObj: { girlFriends: ["dingding", "momo", "weiwei"], age: 24, }, }; }, }; </script> // 子组件 <template> <div> <p>我是儿子组件</p> <button @click="btnClick(Date.now())">点击</button> <span>{{ something }}</span> <span>{{ girlFriends }}</span> </div> </template> <script> export default { props: ["something", "girlFriends"], methods: { btnClick(data) { this.$emit(`update:something`, data); }, }, mounted() { this.$listeners["update:girlFriends"](["singleDog"]); // {age: 24} console.log(this.$attrs); }, }; </script>

思考

v-model和.sync本质都是语法糖               ，设计出来就是为了方便使用减少代码量 

     

     

     
。不过更利于使用的封装究竟是方便新手的上手还是加重了学习负担    



     



     



    ，可能各执己见吧

文章只是个人学习文档并记录总结

















，具体细节请自行查阅官方文档

https://cn.vuejs.org/v2/guide/components-custom-events.html