<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>
Ce que nous voulons réaliser est de changer le Wade ci-dessous en Dean en cliquant sur Dean ci-dessus, puis en cliquant sur Wade ci-dessous et Dean ci-dessus deviendra Wade. Ces exigences impliquent de passer des valeurs entre des composants non parents et enfants
<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>
Faites attention à la signification de ceci ici: pointez sur chaque composant lui
- même et pourquoi enregistrer this_ = this
