查公司的口碑和评价的网站,西乡做网站公司,网上电商平台,亿缘网站建设使用场景#xff1a;
多个组件通过component标签挂载在同一个组件中#xff0c;通过触发时间进行动态切换。vue3与vue2用法不一样#xff0c;这里有坑#xff01;
使用方法#xff1a;
1.通过vue的defineAsyncComponent实现挂载组件
2.component中的is属性
父组件
多个组件通过component标签挂载在同一个组件中通过触发时间进行动态切换。vue3与vue2用法不一样这里有坑
使用方法
1.通过vue的defineAsyncComponent实现挂载组件
2.component中的is属性
父组件
templatedivdiv v-foritem in person.data :keyitem clickbtn(item){{ item.name }}/divh1下面为动态组件/h1component :isperson.componen /component/div
/templatescript setup
import { reactive, onMounted, defineAsyncComponent } from vue;
const One defineAsyncComponent(() import(./One.vue));
const Two defineAsyncComponent(() import(./Two.vue));const person reactive({componen: ,data: [{ type: one, name: 显示组件一 },{ type: two, name: 显示组件二 },],
});
function btn(item) {if (item.type one) person.componen One;if (item.type two) person.componen Two;
}onMounted(() {});
/script
子组件
templatediv组件一/divel-input v-modelperson.input/el-input
/templatescript setup
import { ref, reactive, onMounted, computed, watch } from vue;const person reactive({ input: });
onMounted(() {console.log(组件一);
});
/script
style scoped langless
/style
效果 这里会有警告Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with markRaw or using shallowRef instead of ref. Vue收到一个组件该组件被设置为反应对象。这可能会导致不必要的性能开销应该通过用“markRaw”标记组件或使用“shallowRef”而不是“ref”来避免。 解决方法
1.使用shallowRef替换响应式
templatedivdiv v-foritem in person.data :keyitem clickbtn(item){{ item.name }}/divh1下面为动态组件/h1keep-alivecomponent :iscomponen /component/keep-alive/div
/templatescript setup
import { reactive, onMounted, defineAsyncComponent, shallowRef } from vue;
let componen shallowRef(null);
const Two defineAsyncComponent(() import(./Two.vue));
const One defineAsyncComponent(() import(./One.vue));
let obj shallowRef({Two,One,
});
const person reactive({data: [{ type: one, name: 显示组件一 },{ type: two, name: 显示组件二 },],
});
function btn(item) {if (item.type one) componen.value obj.value.One;if (item.type two) componen.value obj.value.Two;
}onMounted(() {});
/script
style scoped langless
/style
