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

更新日期: 2022-07-29阅读: 47标签: 组件

自定义事件

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本质都是语法糖,设计出来就是为了方便使用减少代码量。不过更利于使用的封装究竟是方便新手的上手还是加重了学习负担,可能各执己见吧。

本文作者:lupulus,链接:https://www.cnblogs.com/yuyunhao/p/16531483.html

链接: https://www.fly63.com/article/detial/11959

Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法

通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数,slot的使用就像它的名字一样, 在组件内定义一块空间。在组件外, 我们可以往插槽里填入任何元素。slot-scope的作用就是把组件内的数据带出来

react 函数子组件(Function ad Child Component)

函数子组件(FaCC )与高阶组件做的事情很相似, 都是对原来的组件进行了加强,类似装饰者。FaCC,利用了react中children可以是任何元素,包括函数的特性,那么到底是如何进行增强呢?

vue.js的一个消息组件实例

v-show 是一个条件渲染指令,它只切换元素 CSS 属性的 display,这里当 show 值为 true 时,我们就显示该元素。props 是用来传递数据的,我们需要在子组件用 props 选项声明它预期的数据,上面的代码中我们声明了 3 个属性

vue.js注册引用全局消息组件

在 src/components 下新建 index.js 文件,复制贴入以下代码:注册全局组件需要使用 Vue.component,第一个参数 ‘Message‘ 是组件名称,第二个参数 Message 是一个对象或者函数,我们这里是一个对象

Vue和React组件之间的传值方式

在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些?组件间的传值是灵活的,可以有多种途径,父子组件同样可以使用EventBus,Vuex或者Redux

通过npm或yarn自动生成vue组件

不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template、script、style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件

vue.js自定义组件directives

自定义指令:以v开头,如:v-mybind。bind的作用是定义一个在绑定时执行一次的初始化动作,观察bind函数,它将指令绑定的DOM作为一个参数,在函数体中,直接操作DOM节点为input赋值。

vue中prop属性传值解析

prop的定义:在没有状态管理机制的时候,prop属性是组件之间主要的通信方式,prop属性其实是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件。 prop属性中可以定义属性的类型,也可以定义属性的初始值。

vue在自定义组件中使用v-model进行数据绑定

有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。先来一个组件,不用vue-model,正常父子通信;点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。

Web组件简介

Web组件由三个独立的技术组成:自定义元素。很简单,这些是完全有效的HTML元素,包含使用一组JavaScript API制作的自定义模板,行为和标记名称(例如,<one-dialog>)。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!