动态组件， v-once指令
2018-08-03 本文已影响0人
椰果粒
动态切换组件，方法一：
component就是动态组件的写法
<div id="app">
<component :is="type"></component>
<button @click="toggleComp">切换组件</button>
</div>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态组件</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child-one v-if="type == 'child-one'"></child-one>
<child-two v-if="type == 'child-two'"></child-two>
<button @click="toggleComp">切换组件</button>
</div>
<script>
var childOne = {
template : `<div>第一个组件</div>`
}
var childTwo = {
template : `<div>第二个组件</div>`
}
var vm = new Vue({
el : "#app",
data : {
type : "child-one"
},
components : {
childOne : childOne,
childTwo : childTwo
},
methods : {
toggleComp : function(){
this.type === 'child-one' ? this.type = 'child-two' : this.type = 'child-one'
}
}
})
</script>
</body>
</html>
