vue组件之间的通信:props方式、emit方式、ref方式

在Vue中组件实例之间的作用域是孤立的，以为不能直接在子组件上引用父组件的数据，同时父组件也不能直接使用子组件的数据

情景1，父组件中调用子组件的方法并向子组件传参——ref

声明下面说的是vue 2.0的

1、当ref直接定义在dom元素上时，则通过this.$refs.name可以获取到dom对dom进行原生的操作

//父组件

ref="firstson">

//子组件component-son内定义一个方法供父组件调用，例如 init

init: function(value) {

//在这里获取到父组件传过来的参数

},

通过this.$refs获取到dom进行操作（注意ref属性的命名不能用驼峰，同时获取的时候也是）

父组件中调用子组件的方法并向子组件传参

this.$refs.firstson.init(a);

//子组件的init方法会调用一次并传递参数a

情景2，子组件触发父组件的方法并传递参数——emit

子组件通过this.$emit()派发事件，父组件利用v-on对事件进行监听，实现参数的传递

//父组件   自定义事件 hello

//子组件

this.$emit('hello',{});

//向父组件派发事件，同时传递参数{},后面的参数的个数不限

//父组件的fatherevent方法将会执行

情景3，父组件向子组件动态传值——props

//父组件

:messageProp="sendProp">

data{

sendProp:'',

}

//子组件

props: {

messageProp: String,

},

父组件的参数sendProp改变，子组件的参数  this.messageProp同时改变

注意：

1、传递参数时要用—代替驼峰命名，HTML不区分大小写

2、sendProp要在父组件的data中定义，例如 sendProp:''

3、messageProp在子组件的props中声明类型，例如 messageProp: String

4、在利用props实现传值的过程中理论上是要实现单向传递，即父组件改变相关参数的值，子组件也相应变化，但是子组件对参数的改变不应该影响父组件。但是当props中接收的是父组件传递的引用类型（对象或者是数组）时，在子组件中对数据改变时，父组件中的数据也会相应的改变，因为两者是指向的同一地址内存。如果不想子组件的改变影响父组件可以利用深拷贝，将接受的数据进行深拷贝后在子组件中使用，而不直接操作接受的数据。

如果帮到了你，请点赞！