Vue父子组件传值

1、父传子  

父组件用v-bind 绑定，子组件用props接收。

情景：我们需要将父组件(workList)的 'hello world' 传给子组件(Test)

父组件：

 子组件：

通过v-bind 将父组件中的hello绑定到name中，在子组件中使用props接收name，并定义类型和默认值，之后即可在子组件中使用name，name即为父组件中传来的值！

2 、子传父

子组件在自定义方法中通过this.$emit('自定义方法名'，值)发送，父组件用'自定义方法名'方法接收。

情景：我们需要将子组件(Test)中的 'This is the first word from child' 传给父组件(workList)

子组件：

父组件： 

 

子组件通过childmsg方法中this.$emit('sendmsg', this.msg),将值传给父组件，父组件通过在子组件上增加sendmsg事件去接收，通过getmsg方法获取到值，并展示到页面上。

 

3、父组件获取子组件值

父组件用ref绑定子组件，通过this.$refs.绑定名.子组件属性名  来获取子组件值 

情景：父组件需要获取子组件中的gender的值

父组件：

子组件：

 

父组件通过给子组件(Test)绑定ref='abc' ，在点击查看子组件时，调用print方法，通过this.$refs.abc.gender将子组件中的gender 打印出来。

 4、$parent/$children

在父组件中也可以通过this.$children将子组件的属性都打印出来，从中获取。（父组件workList有三个子组件所以会打印出三个Vuecomponent）

 

在子组件中也可以通过this.$parent将父组件中的属性都打印出来，从中获取。