组件通信-ref链传输数据

(通过ref链 实现子传父—>父传子)

	<div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <!-- 组件中根元素必须唯一 -->
        <div>
            <h3> 这里是father </h3>
(7.显示父组件的值)
            <button @click='transport'>点击</button>
            <p>Father的n {{ n }} </p>
(1.绑定ref链)
            <Msga ref='msgaa'></Msga>
(4.获取兄弟组件的数据)-(8.:abc="n"把数据传送给msgb)
            <Msgb ref='msgbb':abc="n"></Msgb>
        </div>
    </template>
    <template id="msga">
        <div>
            <h3> 这里是 msg1 </h3>
        </div>
    </template>

    <template id="msgb">
        <div>
            <h3> 这里是msg2 </h3>
(10.绑定事件)
			<button @click="output">输出数据</button>
        </div>
    </template>
_____________________________________________________________________________
    Vue.component('Father', {
        template: '#father',
(5.将数据传给父组件)
        data() {
            return {
                n: 0
            }
        },
(6.父组件保存数据的值)
       	methods: {
            transport() {
                this.n = this.$refs.msgaa.content
            }
        }
    })

    Vue.component('Msga', {
        template: '#msga'，
(2.数据传输)
        data(){
            return{
                content:数据
            }
        }
    })

    Vue.component('Msgb', {
        template: '#msgb'，
(3.数据接收)
        data(){
            return{
                num:0
            }
        },
(9.定义接收数据)
        methods:{
            output(){
              console.log(this.$attrs.abc)  
            }
        }
    })
    new Vue({
        el: '#app'
    })