一,父向子传值 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