The pointing problem of this in data return function and mounted function in Vue

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!

Mar.06,2021

template: component B receives component A with a value of {{value}}

that the value should be registered on example7.$children.
so

bus.$on("id-selected", function (id) {
        console.log(this);
        this.value = id;
        console.log("BA:" + id);
 }
The direction of this in

should not be bus but should be example7
, so just change it to the following

bus.$on("id-selected", (id) => {
        console.log(this);
        this.value = id;
        console.log("BA:" + id);
 }

  1. vue helps you process the direct this in the methods,created of the current vue instance into the current vue instance, but your this is a callback function (the this in the callback function should be your vue instance as bus and should be handled at $on, just like the event binding of jquery will help you deal with this).
  2. _ uid is the number of the vue instance, which is available for each instance and is not duplicated.
Menu