<body>
<div id="app">
<child content="Dean"></child>
<child content="Wade"></child>
</div>
<script>
Vue.component('child', {
props: {
content: String
},
template: '<div>{
{content}}</div>'
})
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handleClick() {
console.log('root component clicked!')
}
}
});
</script>
</body>
達成したいのは、上のディーンをクリックして下のウェイドをディーンに変更し、次に下のウェイドをクリックすると上のディーンがウェイドになります。このような要件には、非親コンポーネントと子コンポーネントの間で値を渡すことが含まれます
<body>
<div id="app">
<child content="Dean"></child>
<child content="Wade"></child>
</div>
<script>
// 挂载到Vue的原型上
Vue.prototype.bus = new Vue()
Vue.component('child', {
data: function(){
return {
selfContent: this.content
}
},
props: {
content: String
},
template: '<div @click="handleClick">{
{selfContent}}</div>',
methods: {
handleClick() {
// 点击把自己的值传递给另一个组件
this.bus.$emit('change', this.content)
}
},
mounted: function() {
var this_ = this
console.log('this_:', this_)
this.bus.$on('change', function(msg){
this_.selfContent = msg
})
}
})
var vm = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
ここでこれの意味に注意してください：各コンポーネント自体
を指し、なぜこれを保存するのか_ = this
