vue2中如何动态渲染组件
在Vue 2中，可以使用component元素，并配合:is属性来动态渲染不同的组件。
<template>
<div>
<!-- 动态组件 -->
<component :is="currentComponent"></component>
</div>
</template>
<script>
export default {
data() {
return {
// 当前要渲染的组件名
currentComponent: 'MyComponentA'
};
},
components: {
MyComponentA: {
// 组件选项
template: '<div>Component A</div>'
},
MyComponentB: {
// 组件选项
template: '<div>Component B</div>'
}
// 可以添加更多的组件
}
};
</script>在上面的例子中，currentComponent可以动态地被设置为注册在components选项下的组件名之一。当currentComponent的值改变时，<component>元素会自动更新它的内容，以匹配当前is属性绑定的组件。
评论已关闭