爱总结,爱搬砖,爱生活
引言
最近在板砖途中遇到一个需要动态创建Vue组件并插入到页面上的需求,之前没有遇到过这类需求,经过一番百度搞定这个问题,在这里写下总结,作为回顾。
心得
动态创建组件依靠Vue.extend
案例引入
现在有下面这样一个需求需要用vue实现,图来…
案例分析
案例中用户通过点击新增按钮,新加下一个页签,要实现这个需求只能通过动态的创建组件,然后添加到页面中,下面来实现这个需求(页签内容部分就不做了,重点放在动态创建页签按钮)
案例实现
<div id="app" class="app">
<div class="title">XXX页面</div>
<div id="tabBox" class="tabBox"></div>
<div class="add" @click="add">+</div>
</div>
<template id="tab">
<div class="tab">{
{tabname}}</div>
</template>
<script src="./lib/vue.js"></script>
<script>
const tab = {
template: '#tab',
props: ['tabname']
}
const vm = new Vue({
data: {
tabName: '',
base: '页签',
num: 1
},
methods: {