vueJS $emit 传递数据 $on接受到但无法使用的问题

Question

在学习vue时，遇到一个问题：
子组件通过$emit来向父组件传递数据（array），在父组件的监听回调函数中也取到了这个数组，但是无法赋值给父组件的data对象里，为什么呢？

子组件

<button type="button" v-on:click.self="submit">确定</button>
//js
export default {
            props:["titleName","id","order"],
            methods: {
                submit:function(){
                this.$emit("ok",[this.titleName,this.id,this.order]) // 向父级传递["xiha",123,3]。        
                }
            }
    }

父组件

<index-popup v-on:ok="submit"></index-popup>
//js
export default {
        data() {
                return {
                titleName:"hahaha",
                id:132155,
                time:"1000",
                order:1,
                seen:false,

                }
            },        
            components: {
            'index-popup': IndexPopup
        },
            methods: {                
            submit:function(arr){
                console.log(arr)   // 父级也接受到了这个数组 ["xiha",123,3]
                this.titleName=arr[0]; // 无效
                this.id=arr[1];        // 无效
                this.order=arr[2];    // 无效
            }
            }
    }

Answer 1

亲测是有效的，可能你用的vue的扩展工具查看的是无效的，但是它确实生效了，应该是扩展工具没即时更新，你在扩展工具里面点点其他组件切换一下应该就生效了

Answer 2

console.log(this)你会找到原因的

---

submit:function(arr){
    console.log(arr)   // 父级也接受到了这个数组 ["xiha",123,3]
    
    console.log(this);    //执行前
    this.titleName=arr[0];
    this.id=arr[1];
    this.order=arr[2];
    console.log(this)    //执行后，就看到效果了
}

Answer 3

我刚测试是可以的。