vue中使用动态组件
1.怎么使用动态组件?1.< component >标签2.:is属性3.动态组件能自动切换组件,进行内容渲染<!DOCTYPE html><html><head><meta charset="utf-8"><title&am
·
1.怎么使用动态组件?
- 1.< component >标签
- 2.:is属性
- 3.动态组件能自动切换组件,进行内容渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue动态组件</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<component :is="type"></component>
<button @click="headleBtnClick">change</button>
</div>
<script>
Vue.component('child-one',{
template: '<div v-once>child-one</div>'
})
Vue.component('child-two',{
template: '<div v-once>child-two</div>' //动态组件每次回销毁一个组件,再创建另一个组件进行显示。
//v-once指令可以将静态内容加载入内存中,
})
var vm = new Vue({
el: '#app',
data: {
type: 'child-one'
},
methods: {
headleBtnClick: function(){
this.type = (this.type === 'child-one'?'child-two' : 'child-one' )
}
}
})
</script>
</body>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)