vue中如何在自定义组件上使用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