Vue 动态加载子组件
Posted qaakd
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 动态加载子组件相关的知识，希望对你有一定的参考价值。
#### 父组件
<template>
<component ref="detail"
:is="myComponent"
:showdevice="showdevice"
@callBack="callBack"></component>
</template>
<script>
export default {
data () {
return {
myComponent: null,
showdevice: { name: '传递的名字' },
}
},
mounted () {
this.detailComponent();
// if (this.myComponent) {
// this.myComponent.getPageRes(device); //调用子组件方法
// }
},
methods: {
detailComponent () {
var myComponent = () => import('./system.vue');
return this.myComponent = myComponent;
},
callBack () {
console.log('子组件触发')
}
}
}
</script>
#### 子组件
<template>
<div @click="callBack">点击触发父组件</div>
</template>
<script>
export default {
data () {
return {
}
},
props: {
showdevice: {
type: Object,
default: () => {
return {};
}
},
},
mounted () {
setTimeout(() => {
console.log(this.showdevice);
}, 100)
}, methods: {
callBack () {
this.$emit("callBack")
}
}
}
</script>
以上是关于Vue 动态加载子组件的主要内容，如果未能解决你的问题，请参考以下文章