从子组件调用父函数会在Vue.js中引发错误
从子组件调用父函数会在Vue.js中引发错误
提问于 2020-11-06 09:56:54
我在父组件中有一个导航抽屉子组件。
MainComponent.vue
<template>
<v-app>
<div>
<NavigationComponent></NavigationComponent>
</div>
</v-app>
</template>现在，在子组件(导航抽屉)中，我尝试从MainComponent调用一个函数，方法是：
this.$parent._appendUser(arr);我有一个类似的父-子组件，它从一个父函数调用到一个子函数，但是我不知道为什么这个组件会给我一个错误：
TypeError: this.$parent._appendUseris不是函数
父组件- MainComponent.vue
<template>
<v-app>
<div class="container" style="padding: 0 !important">
<div class="row">
</div>
<AddInstrumentDrawer :add_instrument_drawer_watcher="add_instrument_drawer_watcher"></AddInstrumentDrawer>
</div>
</v-app>
</template>
<script>
import AddInstrumentDrawer from './shared/AddInstrumentDrawer.vue'
export default {
name: 'user-profile',
components: { AddInstrumentDrawer },
data: () => ({
profile_image_drawer_watcher: 1,
add_instrument_drawer_watcher: 1,
}),
methods: {
appendinstrument(arr) {
alert(arr);
/*for (let i = 0; i < arr.length; i++) {
this.profile_data.instruments.push(arr[i]);
} */
},
}
}
</script>子组件
<template>
<v-app>
<div>
<v-navigation-drawer v-model="add_drawer" fixed temporary right width="600"
disable-resize-watcher disable-route-watcher
style="z-index: 101 !important">
<div class="drawer-footer">
<div class="drawer-footer-content-2">
<button type="button" class="btn mx-1" @click="test()">Save changes</button>
</div>
</div>
</v-navigation-drawer>
</div>
</v-app>
</template>
<script>
export default {
name: 'add-instrument-drawer',
components: { },
props: ['add_instrument_drawer_watcher'],
data: () => ({
add_drawer: false,
}),
watch: {
add_instrument_drawer_watcher: function(n, o) {
this.add_drawer = !this.add_drawer;
},
},
methods: {
test() {
this.$parent.appendinstrument('test');
},
},
}
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-11-06 10:13:57
您不应该使用this.$parent.someMethod()调用父方法，但是必须将自定义事件从子组件转移到父组件，其父方法作为处理程序：
<AddInstrumentDrawer
@append-instrument="appendinstrument"
:add_instrument_drawer_watcher="add_instrument_drawer_watcher"></AddInstrumentDrawer>在儿童部分：
methods: {
test() {
this.$emit('append-instrument','test');
},
},Stack Overflow用户
发布于 2020-11-06 10:20:21
从子组件调用父方法是一种糟糕的做法。组件不应该知道父实现。我建议您在导航抽屉中发出一个事件，并在主组件中处理该事件。
//Navigation.vue
$emit('append-user', arr)//Main.vue
<Navigation @append-user="appendUser" />这样，您就可以将导航组件放置在任何组件中。
关于$parent的另一件事是它不引用包含目标的组件，而是引用组件树中放置组件的直接组件(请考虑DOM遍历)。
//Main.vue
<ComA>
<ComB />
</ComA>在ComB $parent中，将引用ComA，而不是主组件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64719467
复制相关文章
相似问题
ReactJS:如何访问父组件中的所有子组件？
如何从ReactJs中的父组件访问子组件的输入值？
ReactJS:访问组件“父”中的组件
ReactJS:访问父级中的子组件属性
如何从Reactjs中的子组件更新父组件的组件状态
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
