欢迎光临
我们一直在努力

vue父子组件怎么传值,vue父子组件传值

一,父向子传值 1.通过props 使用技巧: 子组件内, props定义变量, 在子组件使用变量 父组件内, 使用子组件, 属性方式给props变量传值

注意事项:

父组件的数据发生了改变,子组件会自动跟着变

子组件不能直接修改父组件传递过来的props,会报错, props是只读的

子组件修改,不通知父级,会造成数据不一致

PS:父组件传给子组件的是一个对象,子组件修改对象的属性,是不会报错的,对象是引用类型, 互相更新

总结:

说明了从父到子的数据流向单向数据流

props的值不能重新赋值, 对象引用关系属性值改变, 互相影响

2.通过$parent?? 使用技巧: 子组件,通过this.$parent获取到 父组件的值或者方法?并可以直接对其值进行修改或对其方法直接调用

二,子向父传值 1.通过$emit?? 使用技巧: 父组件内, 给组件@自定义事件=”父methods函数” 子组件内, 恰当时机this.$emit(‘自定义事件名’, 值)

三,当父向子传值? 子组件又要修改父组件的值时 用到的方法

1.通过v-model? (一个组件只能使用一次)?

使用技巧: 父组件内 ,在组件上使用 v-model(以下俩句代码是v-model的原理) ? ?? 传递? ? :value=”Show” ? ? 修改? ?@input=”Show= $event”? ? 这个$event 就是子组件传递过来的值 子组件内, 在props中默认用value接收传递过来的值? ?;在methods中通过默认的自定义事件名 传递要修改的值

?效果:

注意事项: 1.一个组件上只能使用一次 v-model,? 2.如果需要修改 v-model 的规则名称,可以通过子组件的 model 属性来配置修改

实例如下:

香港vps

在子组件的model中进行修改? ? 父组件不用变

? 疑问:? ? ?如果有多个数据需要实现类似于 v-model 的效果,要怎么办呐??? ? ? ?? ?不要捉急 ,下面就有请我们的.sync修饰符闪亮登场叭

2.使用属性的 .sync 修饰符? 使用技巧: 父组件内 ,在组件使用.sync 子组件内,在适当的时机this.$emit(‘update:props属性名’,值)

持续更新中……..

14043278

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。