vue中如何在自定义组件上使用v-model和.sync

  • vue中如何在自定义组件上使用v-model和.sync已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

tips自定义组件的v-model.sync 修饰符为什么会有这个修饰符?它解决了什么问题?


自定义事件

tips

  1. 推荐始终使用 kebab-case 的事件名。(v-on会将事件名自动转换为小写,避免匹配不到)
    • changeData ×
    • change-data √

自定义组件的v-model

  1. 用法:
    • 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过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 修饰符

  1. 为什么会有这个修饰符?它解决了什么问题?

    • 正常我们父子组件通信是父组件props传参,v-on监听改变数据的事件,子组件通过$emit去触发。
    • 父组件每次都要定义类似的事件函数this.data = newData,如果是一个对象,那么它的每个属性传递过去都要定义相应的事件函数(麻烦重复的代码变多了)
    • .sync就是用来简化这块的代码
  2. 怎么使用.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