Vue.js 如何在Vuejs中为其他组件设置数据

我想使用vuejs将数据从一个组件设置到另一个组件。这是我的代码：

---

我错在哪里？请帮帮我！多谢各位

您在

总线上使用了
功能
。

上的$on，因此

此

不是您所认为的。改用箭头函数，它就可以工作了

const-bus=new-Vue（）；
Vue.组件（“息票”{
数据（）{
返回{
姓名：“tri”
}
},
模板：`
{{name}}

去
`,
方法：{
巴特杜（姓名）{
this.name='Maria'；
}
},
创建（）{
},
安装的（）{
总线$on（'应用'，（名称）=>{
警报（名称）；
this.name=‘罗密欧’；
})
}
});
Vue.component（'couponmore'{
模板：`
设置名称
`,
方法：{
nosukien（）{
总线。$emit（'applied'，'John'）；
}
}
});
新Vue({
el:'根'，
数据：{
耦合应用：错误
}
});
您在
总线上使用了
功能
。
上的$on，因此
这个
不是您想象的那样。改用箭头函数，它就可以工作了


const-bus=new-Vue（）；
Vue.组件（“息票”{
数据（）{
返回{
姓名：“tri”
}
},
模板：`
{{name}}

去
`,
方法：{
巴特杜（姓名）{
this.name='Maria'；
}
},
创建（）{
},
安装的（）{
总线$on（'应用'，（名称）=>{
警报（名称）；
this.name=‘罗密欧’；
})
}
});
Vue.component（'couponmore'{
模板：`
设置名称
`,
方法：{
nosukien（）{
总线。$emit（'applied'，'John'）；
}
}
});
新Vue({
el:'根'，
数据：{
耦合应用：错误
}
});

这是因为在这段代码中，
这是一个窗口，而不是组件

bus.$on('applied', function(name){
    alert(name);
    this.$data.name ='Romeo';
})

另外，您正在使用
this.$data.name
设置数据，而不是简单地使用
this.name
，对此我不确定，但这可能会导致被动数据问题

解决方案：
如果您使用的是ES6，则可以执行以下操作：

bus.$on('applied', (name) => {
    alert(name);
    this.name ='Romeo';
})

这称为箭头函数，当使用箭头函数而不是普通函数时，函数内部的
此
值将与父作用域中的值相同（因此，包含
数据的组件实例
）

如果您使用的是香草javascript，请在末尾使用
.bind（this）
：

bus.$on('applied', function (name) {
    alert(name);
    this.name ='Romeo';
}.bind(this))

这是因为在这段代码中，
这是一个窗口，而不是组件

bus.$on('applied', function(name){
    alert(name);
    this.$data.name ='Romeo';
})

另外，您正在使用
this.$data.name
设置数据，而不是简单地使用
this.name
，对此我不确定，但这可能会导致被动数据问题

解决方案：
如果您使用的是ES6，则可以执行以下操作：

bus.$on('applied', (name) => {
    alert(name);
    this.name ='Romeo';
})

这称为箭头函数，当使用箭头函数而不是普通函数时，函数内部的
此
值将与父作用域中的值相同（因此，包含
数据的组件实例
）

如果您使用的是香草javascript，请在末尾使用
.bind（this）
：

bus.$on('applied', function (name) {
    alert(name);
    this.name ='Romeo';
}.bind(this))

第二个示例中的函数应该是
bus.$on（'applicated'，函数（name）{…}.bind（this））
第二个示例中的函数应该是
bus.$on（'applicated'，函数（name）{…}.bind（this））