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

蜗牛 互联网技术资讯 2022-07-29 15 0

这篇文章主要介绍了vue在自定义组件上如何使用v-model和.sync的方法的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue在自定义组件上如何使用v-model和.sync的方法文章都会有所收获,下面我们一起来看看吧。

自定义事件

tips

  • 推荐vuecli始终自定义使用 kebab-case 的事件名。(v-on会将事件名自动转换为小写,避免匹配不到)

    • changeData ×

    • change-data √

自定义组件的v-model

  • 用法:

    • 父组件定义数据v-model源(不需要定义修改数据的方法),在子组件标签定义上通过v-model="data"进行传递

    • 默认传递的属性名是分value,事件名为input。可以在子展现组件中配置model选项重命名属性名和事件名

    • 子组件props接受名称为value的属性三个中(固定名),vue怎么使用组件,通过用法属性.syncvue$emit("input", payload)在子组件即可方法修改数据,vue自定义组件在哪里,形成步骤双向组件绑定

    // 父组件
    <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);
                },
            },vue自定义组件怎么展现,
        };
    </script>

.sync 修饰符

  • 为什么.sync自定义会有方式这个修饰符?它解决了什么问题属性?

    • 正常我们方法父子组件通信是父组件props传参,v-on监听改变数据展现的事件,子组件通过$emit去触发。

    • 父组件每次都要定义类似vue的事件函数在哪里this.data = newData,如果是一个对象,那么它的每个属性传递过去中都要定义相应的事件函数(麻烦重复的代码分变多了流程)

    • .sync就是用来简化这块的代码

  • 怎么使用.sync?

    • 父组件直接在子组件标签上使用 :name.sync="person.name"

    • 默认发送写法的处理的事件名为属性 update:name,name就是你传过步骤去的属性名

    • 如果版本需要中使用属性,子组件可以通过props接收,也可以使用$attr,$parent等获取。注意:props接收过的步骤属性不会出现定义在当前流程实例定义vuecli的$attr中

    • 如果需要触发事件,可以连接使用连接$emit("update:属性名分",在vue中如何自定义组件,vue组件自定义属性, 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: "我是爹地vue",vue如何使用自定义组件的流程,
      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>

关于“vue在自定义组件上如何使用v-model和.sync的方法”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue在自定义组件上如何使用v-model和.sync的方法”知识都有一定的了解,vue中使用组件,大家如果还想学习几种更多在哪里知识,欢迎关注蜗牛博客行业资讯频道,关于vue 自定义组件的写法与用法。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享v-model为主,文章观点不代表本网站立场,vue怎么创建组件,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论