Answers:
给子组件赋予a ref
并用于$refs
直接在子组件上调用方法。
的HTML:
<div id="app">
<child-component ref="childComponent"></child-component>
<button @click="click">Click</button>
</div>
javascript:
var ChildComponent = {
template: '<div>{{value}}</div>',
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);
}
}
})
有关更多信息,请参阅refs上的Vue文档。
ref
而不是创建道具,而是先观察其值然后将其发送给父级的另一个函数? 我的意思是确实有很多事情要做,但是使用它是否ref
安全?谢谢
ref
很安全。通常,不建议这样做,因为Vue社区更喜欢将状态传递给孩子,并将事件传递给父母。一般来说,这会导致更孤立的内部一致的组件(一件好事™)。但是,如果您要传递给孩子的信息确实是事件(或命令),则修改状态不是正确的模式。在这种情况下,使用a调用方法ref
是完全可以的,并且不会崩溃或发生任何事情。
您所描述的是父级中的状态更改。您通过道具将其传递给孩子。正如您所建议的那样,您将使用watch
该道具。当子级采取行动时,它会通过通知父级emit
,然后父级可能会再次更改状态。
如果您确实希望将事件传递给孩子,则可以通过创建总线(只是Vue实例)并将其作为prop传递给孩子来实现。
v-model
在组件上使用了简写形式,则还可以通过使用更少的代码发出相应的事件来轻松重置该值。
prop
在孩子中创建一个额外的对象,在中创建一个额外的属性data
,然后添加watch
...如果有内置的支持以某种方式将事件从父对象转移到孩子,这会很舒服。这种情况经常发生。
您可以使用$emit
和$on
。使用@RoyJ代码:
的HTML:
<div id="app">
<my-component></my-component>
<button @click="click">Click</button>
</div>
javascript:
var Child = {
template: '<div>{{value}}</div>',
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);
}
}
})
如果有时间,请使用Vuex存储库监视变量(即状态)或直接触发(即调度)操作。
不喜欢在期间使用子项中的绑定的事件总线方法。为什么?后续通话(我正在使用$on
create
create
vue-router
)多次绑定消息处理程序-导致每条消息有多个响应。
将道具从父母下放给孩子并将财产观察员放到孩子中的正统解决方案有点奏效更好。唯一的问题是孩子只能在价值转变上行动。多次传递相同的消息需要某种簿记来强制过渡,以便孩子可以接管零钱。
我发现,如果将消息包装在数组中,它将始终触发子观察程序-即使该值保持不变。
上级:
{
data: function() {
msgChild: null,
},
methods: {
mMessageDoIt: function() {
this.msgChild = ['doIt'];
}
}
...
}
儿童:
{
props: ['msgChild'],
watch: {
'msgChild': function(arMsg) {
console.log(arMsg[0]);
}
}
}
HTML:
<parent>
<child v-bind="{ 'msgChild': msgChild }"></child>
</parent>
在子组件上调用方法的一种简单的分离方法是,从子组件中发出一个处理程序,然后从父组件中调用它。
var Child = {
template: '<div>{{value}}</div>',
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)
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<my-component @handler="setValueHandler"></my-component>
<button @click="click">Click</button>
</div>
父级跟踪子处理程序的功能,并在必要时调用。
以下示例是自我解释。引用和事件可用于在父子之间调用函数。
// PARENT
<template>
<parent>
<child
@onChange="childCallBack"
ref="childRef"
:data="moduleData"
/>
<button @click="callChild">Call Method in child</button>
</parent>
</template>
<script>
export default {
methods: {
callChild() {
this.$refs.childRef.childMethod('Hi from parent');
},
childCallBack(message) {
console.log('message from child', message);
}
}
};
</script>
// CHILD
<template>
<child>
<button @click="callParent">Call Parent</button>
</child>
</template>
<script>
export default {
methods: {
callParent() {
this.$emit('onChange', 'hi from child');
},
childMethod(message) {
console.log('message from parent', message);
}
}
}
</script>
您可以使用key使用key重新加载子组件
<component :is="child1" :filter="filter" :key="componentKey"></component>
如果要使用新的过滤器重新加载组件,请单击按钮以过滤子组件
reloadData() {
this.filter = ['filter1','filter2']
this.componentKey += 1;
},
并使用过滤器触发功能