如何解决在Vue.js 3中安装时,有什么方法可以从父组件访问子方法?
您能教我在VueJS中安装时如何从父组件访问子函数吗?
我已经附上了示例代码,以使此问题更清楚。
P.S。 我已将子组件和一些代码添加到父组件。 您可以在下面看到代码。
<template>
<div>Child</div>
</template>
<script lang="ts">
import { defineComponent } from "@vue/composition-api";
export default defineComponent({
name: "Child",setup() {
const childFunc = () => {
console.log('This is Child.');
};
return {
childFunc
}
}
});
</script>
<script lang="ts">
import { defineComponent,ref,onMounted } from "@vue/composition-api";
import Child from "./Child.vue";
export default defineComponent({
name: "Parent",components: {
Child
},setup() {
const child = ref();
onMounted(() => {
child.value.childFunc(); // Error: childFunc of undefined
});
return {
child
};
},});
</script>
<template>
<Child ref="child" />
</template>
解决方法
它应该工作,在下面的示例中,我创建了一个带有按钮的子组件,该组件增加了一个计数,已安装的计数由父级增加了一个:
const {
createApp,ref,onMounted,defineComponent
} = Vue
let Child = defineComponent({
name: "Child",setup() {
const childFunc = () => {
console.log('This is Child.');
};
return {
childFunc
}
},data() {
return {
count: 0
}
},methods: {
increment() {
this.count++;
}
},template: `
<button @click="count++">
You clicked me {{ count }} times.
</button>`
})
let app = createApp({
el: '#app',setup() {
const child = ref();
onMounted(() => {
child.value.childFunc();
child.value.increment()
});
return {
child
};
},components: {
Child
}
}).mount('#app')
<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
<div id="app">
test
<Child ref="child" />
</div>
,
我不得不问:您确定要这样做吗?函数只是一个哑函数,不是反应性的。您如何设想组件之间的分离?当Vue组件与商店交互时,它们的工作效果最佳,因此它们之间的链接最少。父子关系仅指DOM放置,它可能会随着时间而变化。 ref
是您应该问自己“我真的需要这样做吗?”的功能之一。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。