Vue:父子组件传值( propssyncv-model )

Posted 流云细水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue:父子组件传值( propssyncv-model )相关的知识,希望对你有一定的参考价值。

父子组件props传值

子组件通过$emit方法,通过自定义事件的方式将自身的值传递给父组件

// 子组件通过$emit方法,并传入事件名称'change'来触发父组件监听的change事件
this.$emit('change', 200)

// 父组件监听change事件
<Son :value="num" @change="changeNum" />

父子组件传值 .sync 修饰符

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。
所以推荐以 update:myPropName 的模式触发事件取而代之。
.sync修饰符

// 子组件通过$emit方法,并传入事件名称'update:value'来触发父组件监听的 @update:value 事件
this.$emit('update:value', 200)

// 父组件监听@update:value 事件
<Son :value="money" @update:value="(val) => this.money = val" />

// .sync简写 等价于 @update:value="(val) => this.money = val"
<Son :value.sync="money"/>

v-model组件传值

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突
自定义组件的-v-model

// 子组件通过$emit方法,并传入事件名称'input'来触发父组件监听的 @input 事件
this.$emit('input', 200)

// 父组件监听@input 事件
<Son :value="money" @input="(val) => this.money = val" />

// v-model 等价于 @input="(val) => this.money = val"
<Son v-model="money"/>
.syncv-model 的区别 ?

这里是引用
相同点
都是语法糖,都可以实现父子组件中的数据的双向通信。
区别点
格式不同: v-model=“num”, :num.sync=“num” v-model: @input + value
传递value值,是固定的 :num.sync: @update:num :num是因为一个自定义组件可以传输多个值,用来区分的
v-model只能用一次;.sync可以有多个。

参考

  • https://zhuanlan.zhihu.com/p/85338233
  • https://blog.csdn.net/weixin_48837605/article/details/119616396

vue中父子传值

参考技术A 3父组件是App.vue   子组件是one.vue

(1)在父组件中引用子组件

    (2)    在子组件中自定义可以接收的属性:

  (3)这时候,我们就可以在子组件中使用这个data了(. 如果我们直接改变props的data属性的值,会报错(怕我们数据流发生混                                      乱),所以我们要定义一个属性初始化这个传过来的name )

       (1) 子组件通过this.$emit()的方式将值传递给父组件,父组件用函数的方式接收。

        (2)父组件用函数的方式接收。注意:这里的send是父组件中绑定的函数名父子组件中命名要一致

             (3)通过父亲中的函数,就可以拿到传过来的数据了

以上是关于Vue:父子组件传值( propssyncv-model )的主要内容,如果未能解决你的问题,请参考以下文章

VUE父子组件之间的传值,以及兄弟组件之间的传值

03、vue 页面跳转传值,父子组件传值

uniapp 父子组件传值

React 父子组件传值

vue 父子组件传值方法总结(六种方法)

Vue-Cli—04.父子组件传值祖孙组件传值兄弟组件传值