您的位置：首页 > 产品设计 > UI/UE

前端框架vue.js系列（6）：组件概念、动态组件

2017-09-28 17:00 906 查看

组件的概念

组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。换种说法，组件就是一个个小的可复用零件，通过这些复用零件的组合使用可以搭建起一个大型机械。

我们先来看一个组件的Demo：

<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>

Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其他什么人吃的东西' }
]
}
})

通过上面可知创建组件语句是Vue.component，其中props为接收父结构的入参，template为组件模板。这里要注意template模板既可以直接写文本，也可以通过引用外部模板ID代入。如上例中的语句写法可以换成：

<script type="text/x-template" id="pid">
<div>
<li>{{ todo.text }}</li>
</div>
</script>

<script>
Vue.component('todo-item', {
props: ['todo'],
template: "#pid"
});
</script>

上例中我们创建了组件元素<todo-item></todo-item>，只要在<body>模块范围内加入，即可渲染出来，这类组件我们统称为组合组件。与组合组件不同的另一类组件，就是动态组件。

动态组件

动态组件是指通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。

下面是一个动态组件的Demo：

<body>
<div id="app">
<component v-bind:is="currentView"></component>
<button @click="changeComponent">切换动态组件</button>
</div>
</body>

<!-- 动态组件模板1 -->
<script type="text/x-template" id="dt1">
<div>这里是动态子组件1</div>
</script>
<!-- 动态组件模板2 -->
<script type="text/x-template" id="dt2">
<div>这里是动态子组件2</div>
</script>

<script>
var vue = new Vue({
el: "#app",
data: {
currentView: 'dt1'
},
methods: {
changeComponent: function() {
if(this.currentView == "dt2") {
this.currentView = "dt1";
} else {
this.currentView = "dt2";
}
}
},
filters: {},
computed: {},
components: {
dt1: {
template: "#dt1"
},
dt2: {
template: "#dt2"
}
},
watch: {}
});
</script>

通过上面例子可以看出，动态组件没有用户自定义的元素，它渲染使用的是系统提供的<component>元素。它使用v-bind:is=(vue实例中components下的组件，如本例中的dt1和dt2)绑定组件。动态组件可以实现自由在界面中切换组件的效果。
在实际开发中，我们更常用到的是组合组件，下一篇将介绍组合组件的各属性用法及参数传输的原理。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue 前端框架

相关文章推荐

新的分享

章节导航