Test and reflection triggered by the "Communication between non-parent and Child components" section of the official website tutorial:
is about creating two child components, and the value of component an is passed to component b.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="example-7">
:
Vue
<a-component></a-component>
<b-component></b-component>
</div>
</body>
<script>
//
let bus = new Vue();
Vue.component("a-component", {
template: `<button @click="idSelected">A</button>`,
methods: {
//June[Question]this?
idSelected: function () {
bus.$emit("id-selected", 1);//A
}
}
});
Vue.component("b-component", {
data() {
//June[Question]this?
console.log(this);
return {
value: ""
}
},
template: `<p v-model="value">BA:{{value}}`,
//June[Question]mountedmethods
mounted() {
//A
bus.$on("id-selected", function (id) {
console.log(this);
this.value = id;
console.log("BA:" + id);
//thisthis o{_uid: 30, _isVue: true, $options: {}, _renderProxy: o, _self: o,}
// }.bind(this));
//thisvalue,this hn{_uid: 27, _isVue: true, $options: {}, _renderProxy: hn, _self: hn,}
});
}
});
let example7 = new Vue({
el: "-sharpexample-7"
});
</script>
</html>
demo means that when you click component A"s button "pass the value of component A", the emit function can pass the number 1 to component B, which then assigns it to its own property and displays it on the page. Passing is not a problem, but it is found that without binding this, to the callback function of bus.$on in B at the beginning, the value in component B cannot be assigned, so it is suspected that this points to the problem, so this.
is printed out. bus.$on("id-selected", function (id) {
console.log(this);
this.value = id;
console.log("BA:" + id);
});
BidBvalue$onthisdata(){}thisvalue
Bthis,
you can see that the value of component B can be assigned successfully this time, and the direction of this is the same.
< H1 > Question? < / H1 > 1. My understanding is that this is bound to a global window object before it is assigned, right?
2. Who can explain what o {_ uid:30.}, hn {_ uid:27.} mean?
Thank you!