多个组件使用同一个挂载点，可以实现他们的动态切换
使用方法：只用<component :is="组件名"> 方式进行切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="test">
<input type="button" value="点击切换组件1" @click="flag='my-vue1'"> <!-- 通过@click改变标签值 -->
<input type="button" value="点击切换组件2" @click="flag='my-vue2'">
<div>
<component :is="flag"></component> <!-- 使用"：is='组件名'"标记要使用什么组件 -->
</div>
</div>
<template id="zujian1">
<div>
<p>这是组件1</p>
</div>
</template>
<template id="zujian2">
<div>
<p>这是组件2</p>
</div>
</template>
<script>
new Vue({
el:'#test',
data:{
flag:'my-vue1'
},
components:{ //定义多个组件
'my-vue1':{
template:'#zujian1'
},
'my-vue2':{
template:'#zujian2'
},
}
})
</script>
</body>
</html>
扫一扫
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
