Vue.js——父组件与子组件之间的通信：1.父传子用props['属性名']，子传父用this.$emit('事件名',this.值)；2.ref

 

1.由父组件  传值 到子组件：（通过属性传值）

一共有7中定义component的方法，参考地址：https://medium.com/js-dojo/7-ways-to-define-a-component-template-in-vuejs-c04e0c72900d

(1)创建子组件 指定属性，把要传递的值给属性

(2)在子组件内部声明props属性

props:['name']

    
    
    



    {{myValue}}
    







2.子组件和父组件通信

方法一：用event事件传值

步骤：通过事件传值，需要先约定事件的名称：toFather

(1)在调用的子组件中，绑定自定义的事件

(2)在子组件中通过this.$emit方法来触发自定义事件，并传递值：

this.$emit('自定义事件名称'，'需要传递的值')

this.$emit('toFather',this.kw);

    
    
    



    {{myValue}}
    

方法二：ref  

   父组件操作子组件：
    <子组件 ref="名称">
    在父组件中可以通过：this.$refs.名称.属性（方法名（））来获得子组件的数据
    子组件操作父组件：
    this.$parent.属性或者方法，来获得父组件中的数据

 

    
    
    



    3.ref  父组件操作子组件：
    <子组件 ref="名称">
    在父组件中可以通过：this.$refs.名称.属性（方法名（））来获得子组件的数据
    子组件操作父组件：
    this.$parent.属性或者方法，来获得父组件中的数据


    {{msg}}