组件之间传值通讯之父传子

组件之间传值通讯分为三种: 父传子、子传父、兄弟组件之间的通讯

父传子

1、props 属性传递

父组件通过自定义属性给子组件传值，子组件用props接收

//父组件
    <div>
        <h1>Parent</h1>
        <child-one :msgToChild="msg"></child-one>
    </div>

    data () {
        return {
            msg:'i am you father'
        }
    }

  //子组件
   <div>
        <h1>ChildOne</h1>
        <div>接收到父元素的传值:{{msgToChild}}</div>
   </div>



     props: {
            msgToChild: {
                type: String,
            }
       }

2、方法传递

通过组件标签进行方法的传递，子组件$emit触发方法

  //父组件
<child-one :msgToChild="msg" @methodToChild="showMsg"></child-one>

 methods:{
        /*定义方法*/
        showMsg () {
            alert('i am your father')
        }
    },

//子组件
<div>接收到父亲传来的消息:{{msgToChild}}</div>
 <!--定义一个按钮用来触发方法-->
<button @click="needFatherMethod">place click me</button>

 props:{
        /*接收方法*/
        methodToChild:{
            type:Function
        }
    },
 methods:{
        /*触发方法*/
        needFatherMethod () {
            this.$emit('methodToChild')
        }

}