vue2.0组件之间的传值

1.父子组件--props

props:需要注意的是，虽然的是单向的数据流，但是如果传递的是数组或是对象这样的引用类型,子组件数据变化，父组件的数据通也会变化

子组件代码

<template>
    <div>
        <p>{{msgfromfather1}}</p>
        <button @click="onClickMe">click!</button>
    </div>
</template>

 export default{
        name:"child",
        data(){
            return{

            }
        },
        props: ['msgfromfather1'],
        methods: {
//            onClickMe () {
//                console.log(this.msgfromfather1)
//            }
        }
    }
父组件代码

<child :msgfromfather=msgfromfather></child>//动态绑定的数据
<child1 msgfromfather1="这是父组件传递固定内容的例子"></child1>//固定内容
2.兄弟组件或是子组件向父组件传值--$on和$emit
a组件内容

<span class="content">我是A组件的数据->{{a}}</span>
      <input type="button" value="把A数据传给C" @click = "send">
</div>

export default{
    data(){
        return{
            a:"我是a組件的內容"
        }
    },
    methods:{
        send(){
            this.$eventHub.$emit("a-msg", this.a);
        }
    }
}
接收内容的组件

export default{
    data(){
        return{
            a:"",
        }
    },
    created (){
        this.$eventHub.$on("a-msg", function (a) {
            this.a = a;
        }.bind(this));
    },
    methods:{

    }
}