我無法從子組件訪問父方法。我按照官方檔案說的做了。
父模板：
<template>
<v-app>
<v-sheet height="100vh">
<v-sheet height="100vh" >
<div ref="ComponentDisplay" :is="currentComponent"></div>
</v-sheet>
<DrawerComponent></DrawerComponent>
</v-sheet>
</v-app>
</template>
<script>
export default {
name: 'Dashboard',
data: function () {
return {
currentComponent: null
}
},
methods: {
displayComponent (component) {
this.currentComponent = component
}
}
}
</script>
抽屜組件：
export default {
name: 'DrawerComponent',
methods: {
exit: function () {
logout()
},
swapComponent: function (component) {
this.$parent.displayComponent(this.components[component])
}
},
data: () => ({
drawer: false,
group: null,
mini: true,
components: {}
}),
watch: {
group () {
this.drawer = false
}
}
}
</script>
在線：
this.$parent.displayComponent(this.components[component])
引發以下錯誤：
TypeError: this.$parent.displayComponent 不是函式
uj5u.com熱心網友回復：
使用它不是一個好習慣$parent，但您可以使用它emit來從子組件發送事件以在父組件中運行某些方法：
在子組件中使用您的有效負載發出事件：
swapComponent: function (component) {
this.$emit("swap-component",this.components[component])
}
在父母一中：
<DrawerComponent @swap-component="displayComponent"></DrawerComponent>
并更改div為component
<div ref="ComponentDisplay" :is="currentComponent"></div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/415973.html
標籤：