回答(8)
2 years ago
给子组件 ref 并使用 $refs 直接调用子组件上的方法 .
HTML：
Click
JavaScript的：
var ChildComponent = {
template: '
data: function () {
return {
value: 0
};
},
methods: {
setValue: function(value) {
this.value = value;
}
}
}
new Vue({
el: '#app',
components: {
'child-component': ChildComponent
},
methods: {
click: function() {
this.$refs.childComponent.setValue(2.0);
}
}
})
2 years ago
你所描述的是父母的状态变化 . 你通过道具把它传给了孩子 . 正如你的建议，你会 watch 那个道具 . 当孩子采取行动时，它会通过 emit 通知父母，然后父母可能会再次更改状态 .
var Child = {
template: '
props: ['canI'],
data: function () {
return {
counter: 0
};
},
watch: {
canI: function () {
if (this.canI) {
++this.counter;
this.$emit('increment');
}
}
}
}
new Vue({
el: '#app',
components: {
'my-component': Child
},
data: {
childState: false
},
methods: {
permitChild: function () {
this.childState = true;
},
lockChild: function () {
this.childState = false;
}
}
})
Go
2 years ago
您可以使用 $emit 和 $on . 使用@RoyJ代码：
HTML：
Click
JavaScript的：
var Child = {
template: '
data: function () {
return {
value: 0
};
},
methods: {
setValue: function(value) {
this.value = value;
}
},
created: function() {
this.$parent.$on('update', this.setValue);
}
}
new Vue({
el: '#app',
components: {
'my-component': Child
},
methods: {
click: function() {
this.$emit('update', 7);
}
}
})
2 years ago
如果您有时间，请使用Vuex商店直接观察变量(也称为状态)或触发(也称为调度)操作 .
2 years ago
在 create 期间，不喜欢event-bus approach在孩子身上使用 $on 绑定 . 为什么？后续的 create 调用(我正在使用 vue-router )多次绑定消息处理程序 - 导致每条消息有多个响应 .
将道具从父母传给孩子并将物品观察者放在孩子身上的正统解决方案效果更好 . 唯一的问题是孩子只能对 Value 转变采取行动 . 多次传递相同的信息需要某种簿记来强制转换，以便孩子可以接受改变 .
我发现如果我将消息包装在一个数组中，它将始终触发子监视器 - 即使值保持不变 .
家长：
{
data: function() {
msgChild: null,
},
methods: {
mMessageDoIt: function() {
this.msgChild = ['doIt'];
}
}
...
}
儿童：
{
props: ['msgChild'],
watch: {
'msgChild': function(arMsg) {
console.log(arMsg[0]);
}
}
}
HTML：
2 years ago
The below example is self explainatory. where refs and events can be used to call function from and to parent and child.
// PARENT
@onChange="childCallBack"
ref="childRef"
:data="moduleData"
/>
Call Method in child
export default {
methods: {
callChild() {
this.$refs.childRef.childMethod('Hi from parent');
},
childCallBack(message) {
console.log('message from child', message);
}
}
};
// CHILD
Call Parent
export default {
methods: {
callParent() {
this.$emit('onChange', 'hi from child');
},
childMethod(message) {
console.log('message from parent', message);
}
}
}
2 years ago
我认为我们应该考虑父母使用孩子的方法的必要性 . 事实上，父母不需要关心孩子的方法，但可以将孩子组件视为FSA(有限状态机) . 父母组件控制子组件的状态 . 因此，观察状态更改或仅使用计算功能的解决方案就足够了
2 years ago
在子组件上调用方法的简单解耦方法是从子组件中发出处理程序，然后从父组件调用它 .
var Child = {
template: '
data: function () {
return {
value: 0
};
},
methods: {
setValue(value) {
this.value = value;
}
},
created() {
this.$emit('handler', this.setValue);
}
}
new Vue({
el: '#app',
components: {
'my-component': Child
},
methods: {
setValueHandler(fn) {
this.setter = fn
},
click() {
this.setter(70)
}
}
})
Click
父级会在必要时跟踪子处理程序函数和调用 .
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
