如何从父组件调用子组件中的方法?
How can I call method in child component from parent component?
我有 4 个组件
我的组件首先是这样的:
<template>
...
<component-second></component-second>
...
</template>
<script>
...
export default {
...
updated() {
// call check method in the component fourth
}
}
</script>
我的第二个组件是这样的:
<template>
...
<component-third></component-third>
...
</template>
<script>
...
export default {
...
}
</script>
我的第三个组件是这样的:
<template>
...
<component-fourth></component-fourth>
...
</template>
<script>
...
export default {
...
}
</script>
我的第四个组件是这样的:
<template>
...
</template>
<script>
...
export default {
...
methods: {
check() {
...
}
}
}
</script>
所以,如果组件中的 update() 首先执行,我想在第四个组件中调用检查方法
我该怎么做?
您可以使用 Vue 实例作为事件总线。
您将创建一个全局变量:
var eventHub = new Vue(); // use a Vue instance as event hub
要发出您将在任何组件中使用的事件:
eventHub.$emit('myevent', 'some value');
并且,要再次在任何组件中收听该事件,请执行以下操作:
eventHub.$on('myevent', (e) => {
console.log('myevent received', e)
});
演示:
var eventHub = new Vue(); // use a Vue instance as event hub
Vue.component('component-first', {
template: "#component-first-tpl",
data() { return {someFlag: true} },
updated() {
eventHub.$emit('myevent', 'some value');
}
});
Vue.component('component-second', {
template: "#component-second-tpl"
});
Vue.component('component-third', {
template: "#component-third-tpl"
});
Vue.component('component-fourth', {
template: "#component-fourth-tpl",
created() {
eventHub.$on('myevent', (e) => {
console.log('myevent received', e)
this.check();
});
},
methods: {
check() {
console.log('check called at fourth');
}
}
})
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
<script src="https://unpkg.com/vue"></script>
<template id="component-first-tpl">
<div>
<component-second></component-second>
<br>
someFlag: {{ someFlag }}
<button @click="someFlag = !someFlag">Trigger update</button>
</div>
</template>
<template id="component-second-tpl">
<div>
<component-third></component-third>
</div>
</template>
<template id="component-third-tpl">
<div>
<component-fourth></component-fourth>
</div>
</template>
<template id="component-fourth-tpl">
<div><h1>I'm Number 4</h1></div>
</template>
<div id="app">
<p>{{ message }}</p>
<component-first></component-first>
</div>
注意:如果创建专用实例作为事件中心在您的环境中比较复杂,您可以将 eventHub
替换为 this.$root
(在您的组件内) 并使用您自己的 Vue 实例作为中心。
我想尝试的是在父方法中创建一个数据元素并将其传递给子方法,然后在 component-four
中观察它,并在其值发生变化时触发检查方法。
<template>
...
<component-second update-flag="updateFlag"></component-second>
...
</template>
<script>
...
export default {
data(){
return {
updateFlag: true;
}
}
updated() {
// call check method in the component fourth
updateFlag = !updateFlag;
}
}
</script>
Component-second:
<template>
...
<component-third update-flag="updateFlag"></component-third>
...
</template>
<script>
...
export default {
...
props: ['updateFlag']
}
</script>
组件第三:
<template>
...
<component-fourth update-flag="updateFlag"></component-third>
...
</template>
<script>
...
export default {
...
props: ['updateFlag']
}
</script>
组件第四:
<template>
...
</template>
<script>
...
export default {
...
props: ['updateFlag'],
watch: {
updateFlag: function (val) {
this.check();
}
},
methods: {
check() {
...
}
}
}
</script>
我有 4 个组件
我的组件首先是这样的:
<template>
...
<component-second></component-second>
...
</template>
<script>
...
export default {
...
updated() {
// call check method in the component fourth
}
}
</script>
我的第二个组件是这样的:
<template>
...
<component-third></component-third>
...
</template>
<script>
...
export default {
...
}
</script>
我的第三个组件是这样的:
<template>
...
<component-fourth></component-fourth>
...
</template>
<script>
...
export default {
...
}
</script>
我的第四个组件是这样的:
<template>
...
</template>
<script>
...
export default {
...
methods: {
check() {
...
}
}
}
</script>
所以,如果组件中的 update() 首先执行,我想在第四个组件中调用检查方法
我该怎么做?
您可以使用 Vue 实例作为事件总线。
您将创建一个全局变量:
var eventHub = new Vue(); // use a Vue instance as event hub
要发出您将在任何组件中使用的事件:
eventHub.$emit('myevent', 'some value');
并且,要再次在任何组件中收听该事件,请执行以下操作:
eventHub.$on('myevent', (e) => {
console.log('myevent received', e)
});
演示:
var eventHub = new Vue(); // use a Vue instance as event hub
Vue.component('component-first', {
template: "#component-first-tpl",
data() { return {someFlag: true} },
updated() {
eventHub.$emit('myevent', 'some value');
}
});
Vue.component('component-second', {
template: "#component-second-tpl"
});
Vue.component('component-third', {
template: "#component-third-tpl"
});
Vue.component('component-fourth', {
template: "#component-fourth-tpl",
created() {
eventHub.$on('myevent', (e) => {
console.log('myevent received', e)
this.check();
});
},
methods: {
check() {
console.log('check called at fourth');
}
}
})
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
<script src="https://unpkg.com/vue"></script>
<template id="component-first-tpl">
<div>
<component-second></component-second>
<br>
someFlag: {{ someFlag }}
<button @click="someFlag = !someFlag">Trigger update</button>
</div>
</template>
<template id="component-second-tpl">
<div>
<component-third></component-third>
</div>
</template>
<template id="component-third-tpl">
<div>
<component-fourth></component-fourth>
</div>
</template>
<template id="component-fourth-tpl">
<div><h1>I'm Number 4</h1></div>
</template>
<div id="app">
<p>{{ message }}</p>
<component-first></component-first>
</div>
注意:如果创建专用实例作为事件中心在您的环境中比较复杂,您可以将 eventHub
替换为 this.$root
(在您的组件内) 并使用您自己的 Vue 实例作为中心。
我想尝试的是在父方法中创建一个数据元素并将其传递给子方法,然后在 component-four
中观察它,并在其值发生变化时触发检查方法。
<template>
...
<component-second update-flag="updateFlag"></component-second>
...
</template>
<script>
...
export default {
data(){
return {
updateFlag: true;
}
}
updated() {
// call check method in the component fourth
updateFlag = !updateFlag;
}
}
</script>
Component-second:
<template>
...
<component-third update-flag="updateFlag"></component-third>
...
</template>
<script>
...
export default {
...
props: ['updateFlag']
}
</script>
组件第三:
<template>
...
<component-fourth update-flag="updateFlag"></component-third>
...
</template>
<script>
...
export default {
...
props: ['updateFlag']
}
</script>
组件第四:
<template>
...
</template>
<script>
...
export default {
...
props: ['updateFlag'],
watch: {
updateFlag: function (val) {
this.check();
}
},
methods: {
check() {
...
}
}
}
</script>