v-bind:is怎么用?
简单来说,就是动态组件加载。说明这是个组件,具体记载哪个,由v-bind:is指定的名称确定。
<component v-bind:is=courent></component>
上面的代码component 用来动态的选择要呈现出哪个组件的内容
courent
变量,定义在vue实例的data中
var app = new Vue({
el: '#app',
data() {
return {
courent: ''
}
},
})
通过各种方法改变 data中courent的值,匹配不同的组件名称,来展示内容。
下面是小demo实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="courent='cpn1'">组件1</button>
<button @click="courent='cpn2'">组件2</button>
<button @click="courent='cpn3'">组件3</button>
<component v-bind:is=courent></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
Vue.component('cpn1', {
template: `<div>这是组件1</div>`
})
Vue.component('cpn2', {
template: `<div>这是组件2</div>`
})
Vue.component('cpn3', {
template: `<div>这是组件3</div>`
})
var app = new Vue({
el: '#app',
data() {
return {
courent: 'cpn1'
}
},
})
</script>
</body>
</html>
注册了三个组件,三个按钮来控制courent的值,
当coutent = cpn1时,就变成了
<component is='cpn1‘></component>
然后展示cpn1的内容
总结:
- 动态绑定 v-bind:is 后面的值
- 根据绑定的值去寻找同名的组件
- 去渲染这个组件