鍍金池/ 問答/Java  HTML/ Vue中this在data return function以及mounted函數(shù)

Vue中this在data return function以及mounted函數(shù)中的指向問題

由官網(wǎng)教程《非父子組件的通信》部分引發(fā)的測試和思考：
大致就是建立兩個子組件，組件a的值傳給組件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">
        <p>非父子組件的通信:</p>
        <p>有時候，非父子關系的兩個組件之間也需要通信。在簡單的場景下，可以使用一個空的Vue實例作為事件總線。</p>
        <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);//觸發(fā)組件A中的事件
            }
        }
    });
    Vue.component("b-component", {
        data() {
            //June[Question]這里的this指?
            console.log(this);
            return {
                value: ""
            }
        },
        template: `<p v-model='value'>組件B接收到組件A的值為:{{value}}</p>`,
        //June[Question]mounted和methods的區(qū)別
        mounted() {
            //監(jiān)聽組件A的事件，并接收其傳遞的數(shù)據(jù)
            bus.$on("id-selected", function (id) {
                console.log(this);
                this.value = id;
                console.log("組件B接收到組件A的值為:" + id);
                //如果綁定this上下文的話，this為 o?{_uid: 30, _isVue: true, $options: {…}, _renderProxy: o, _self: o,?…}
            // }.bind(this));
            //如果不綁定this上下文的話，value屬性拿不到,this為 hn?{_uid: 27, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn,?…}
        });
        }
    });
    let example7 = new Vue({
        el: "#example-7"
    });

</script>
</html>

demo就是想要在點擊組件A的按鈕“傳遞組件A的值”時，emit函數(shù)里可以傳遞數(shù)字1給組件B,組件B再把它賦值給自己的屬性，然后顯示在頁面上。傳遞不是問題，不過發(fā)現(xiàn)一開始不對B內(nèi)的bus.$on的回調(diào)函數(shù)綁定this，會無法對組件B中的value進行賦值，所以懷疑this指向的問題，所以打印出了this.

 bus.$on("id-selected", function (id) {
                console.log(this);
                this.value = id;
                console.log("組件B接收到組件A的值為:" + id);
 });

圖片描述
圖片描述

可以發(fā)現(xiàn)組件B內(nèi)是可以獲取到傳遞的id值的，但是組件B的value并沒有賦值成功，而$on匿名函數(shù)內(nèi)的this指向跟data(){}中的this指向不同，也就是說作用域不同，導致value無法被賦值成功。

當對組件B的匿名函數(shù)綁定this時,

 bus.$on("id-selected", function (id) {
                console.log(this);
                this.value = id;
                console.log("組件B接收到組件A的值為:" + id);
 }.bind(this));

圖片描述
圖片描述

可以發(fā)現(xiàn)這次組件B的value可以被賦值成功了，而this的指向也相同了。

Question?

1.我的理解是this是綁定到了全局window對象了，才實現(xiàn)賦值，對嗎?
2.誰解釋下o{_uid:30.....},hn{_uid:27...}是什么意思？

謝謝！

回答
編輯回答
念初
  1. vue是幫你把當前vue實例的methods，created等里面的直接this處理成了當前vue實例，可是你的this是回調(diào)函數(shù)的呀（回調(diào)函數(shù)里的this應該是你作為bus的vue實例，應該是在$on的時候做了處理，就像jquery的事件綁定會幫你處理this一樣）。
  2. _uid是vue實例的編號，每個實例都有，不重復。
2018年8月15日 08:01
編輯回答
別硬撐

template: <p v-model='value'>組件B接收到組件A的值為:{{value}}</p> 中的value 應該是注冊在example7.$children上的。
所以

bus.$on("id-selected", function (id) {
        console.log(this);
        this.value = id;
        console.log("組件B接收到組件A的值為:" + id);
 }

中this的指向不用應該是bus 而應該是example7
所以改成以下就好了

bus.$on("id-selected", (id) => {
        console.log(this);
        this.value = id;
        console.log("組件B接收到組件A的值為:" + id);
 }
2018年7月10日 22:23