vue在自定义组件上使用v-model和.sync的方法实例

目录

• 自定义事件
• 自定义组件的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

总结

到此这篇关于vue在自定义组件上使用v-model和.sync的文章就介绍到这了,更多相关vue自定义组件使用v-model和.sync内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！