码迷,mamicode.com
首页 > Web开发 > 详细

【Html】Vue动态插入组件

时间:2018-04-21 15:21:56      阅读:713      评论:0      收藏:0      [点我收藏+]

标签:blank   bsp   AC   code   vue.js   strong   one   div   xtend   

html:

<div id="app">
  <p>{{ message }}</p>
  <button @click="add(‘a-component‘, ‘我是A‘)">添加A组件</button>
  <button @click="add(‘b-component‘, ‘我是B‘)">添加B组件</button>
  <component :is="item.component" :text="item.text" v-for="item in items"></component>
</div>

js:

<script>
const aComponent = Vue.extend({
  props: [‘text‘],
  template: ‘<li>A Component: {{ text }}</li>‘
})

const bComponent = Vue.extend({
  props: [‘text‘],
  template: ‘<li>B Component: {{ text }}</li>‘
})

new Vue({
  el: ‘#app‘,
  data () {
    return {
      message: ‘Hello Vue.js!‘,
      items: []
    }
  },
  methods: {
    add (name, text) {
       this.items.push({
         component: name,
         text: text
       })
    }
  },
  components: {
    aComponent,
    bComponent
  }
})
</script>

重点是使用了:

Vue.extend

查看实例:

https://codepen.io/kakarrot2009/pen/VxLOrQ

 

【Html】Vue动态插入组件

标签:blank   bsp   AC   code   vue.js   strong   one   div   xtend   

原文地址:https://www.cnblogs.com/mqxs/p/8901171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!