一、Vue中动态组件写在前面的例子,这个未使用动态组件。只是引出动态组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../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>
<!-- 当点击change按钮时,会改变child-one和child-two 是否显示 -->
<button @click='handleClick'>change</button>
</div>
<script type="text/javascript">
Vue.component('child-one',{
template:"<div>child-one</div>"
})
Vue.component('child-two',{
template:"<div>child-two</div>"
})
var vm = new Vue({
el: "#app",
data:{
type: 'child-one'
},
methods:{
handleClick:function() {
this.type = this.type ==='child-one' ?"child-two":"child-one"
}
}
})
</script>
</body>
</html>
点击 chang按钮时,改变 child-one和child-two两个值。
二 、使用动态组件 componet :is="type" 简化,父组件的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- 动态组件,type动态决定显示那个子组件 -->
<componet :is="type"></componet>
<!-- <child-one v-if="type === 'child-one' "></child-one>
<child-two v-if="type === 'child-two' "></child-two> -->
<!-- 当点击change按钮时,会改变child-one和child-two 是否显示 -->
<button @click='handleClick'>change</button>
</div>
<script type="text/javascript">
Vue.component('child-one',{
template:"<div>child-one</div>"
})
Vue.component('child-two',{
template:"<div>child-two</div>"
})
var vm = new Vue({
el: "#app",
data:{
type: 'child-one'
},
methods:{
handleClick:function() {
// 三目运算符,如果this.type ==='child-one' 则返回child-two否则显示 child-one
this.type = this.type ==='child-one' ?"child-two":"child-one"
}
}
})
</script>
</body>
</html>
三、加入 v-once 每次创建完成后放到内存中,再次创建时在内存中获取,这样就提升了性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- 动态组件,type动态决定显示那个子组件 -->
<!-- <componet :is="type"></componet> -->
<child-one v-if="type === 'child-one' "></child-one>
<child-two v-if="type === 'child-two' "></child-two>
<!-- 当点击change按钮时,会改变child-one和child-two 是否显示 -->
<button @click='handleClick'>change</button>
</div>
<script type="text/javascript">
// div 上加入了v-once 指令,在每次创建 完成后就会放到内存中。再切换过来时就不需要再创建新的组件
Vue.component('child-one',{
template:"<div v-once>child-one</div>"
})
// div 上加入了v-once 指令,在每次创建 完成后就会放到内存中。
Vue.component('child-two',{
template:"<div v-once>child-two</div>"
})
var vm = new Vue({
el: "#app",
data:{
type: 'child-one'
},
methods:{
handleClick:function() {
// 三目运算符,如果this.type ==='child-one' 则返回child-two否则显示 child-one
this.type = this.type ==='child-one' ?"child-two":"child-one"
}
}
})
</script>
</body>
</html>