vue 组件传值

Posted 2022-08-12 treectj

vue 组件传值分为 父传子、子传父、非父子传值

父组件访问子组件的值

　　　　子组件中通过this.$emit(‘childName‘,childData)　　父组件通过v-on监听一个事件  @childName = "childData"    methods: childData (data) console.log(data)

 

　　　　父组件通过 ref 获取子组件的值　在子组件通过ref，在父组件中通过this.$refs.refsName访问子组件中的值

　　　　 　　注意：当 ref 和 v-for 一起使用的时候，得到的引用将会是一个包含了对应数据源的这些子组件的数组。就是得到一个数组对象嘛  下图是官网的建议

 

 

　　　　通过 provide 和 inject

　　　　父组件provide: name:"Gatter" 　　子组件 inject:[name]   　　下图是官网的建议

 

 

子组件访问父组件的值

　　　　在父组件v-bind一个属性，子组件props接收 可设定传过的数据类型

　　　　

　　　　子组件中通过this.$parent来操作父组件中的值（不建议，老老实实用props不好吗）下图是官网给出的建议