(通过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'
})