在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据
情景1,父组件中调用子组件的方法并向子组件传参——ref
声明下面说的是vue 2.0的
1、当ref直接定义在dom元素上时,则通过this.$refs.name可以获取到dom对dom进行原生的操作
//父组件
<component-son ref="firstson"></component-son>
//子组件component-son内定义一个方法供父组件调用,例如 init
init: function(value) {
//在这里获取到父组件传过来的参数
},
通过this.$refs获取到dom进行操作(注意ref属性的命名不能用驼峰,同时获取的时候也是)
父组件中调用子组件的方法并向子组件传参
this.$refs.firstson.init(a);
//子组件的init方法会调用一次并传递参数a
情景2,子组件触发父组件的方法并传递参数——emit
子组件通过this.$emit()派发事件,父组件利用v-on对事件进行监听,实现参数的传递
//父组件 自定义事件 hello
<component-son @hello="fatherevent"></component-son>
//子组件
this.$emit('hello',{});
//向父组件派发事件,同时传递参数{},后面的参数的个数不限
//父组件的fatherevent方法将会执行
情景3,父组件向子组件动态传值——props
//父组件
<component-son :messageProp="sendProp"></component-son>
data{
sendProp:'',
}
//子组件
props: {
messageProp: String,
},
父组件的参数sendProp改变,子组件的参数 this.messageProp同时改变
注意:
1、传递参数时要用—代替驼峰命名,HTML不区分大小写
2、sendProp要在父组件的data中定义,例如 sendProp:''
3、messageProp在子组件的props中声明类型,例如 messageProp: String
4、在利用props实现传值的过程中理论上是要实现单向传递,即父组件改变相关参数的值,子组件也相应变化,但是子组件对参数的改变不应该影响父组件。但是当props中接收的是父组件传递的引用类型(对象或者是数组)时,在子组件中对数据改变时,父组件中的数据也会相应的改变,因为两者是指向的同一地址内存。如果不想子组件的改变影响父组件可以利用深拷贝,将接受的数据进行深拷贝后在子组件中使用,而不直接操作接受的数据。
如果帮到了你,请点赞!