问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue1.0 如何点击一个按钮添加不存在的组件(不是手动编辑或注册的)。

头像
汇品铺子
    2142511

    例如，
    clipboard.png

    点击加号之后，添加一个tab3。如何实现呢，万分感谢。

    代码链接在此，之前没有描述清楚，望谅解。
    示例代码

    vue.js
    阅读 3.3k
    3 个回答
    得票最新
    头像
    almon000
      32121521
      ✓ 已被采纳

      显示tab的时候用v-for,点击添加时使v-for绑定的数组添加一项。大概如下：

      <div class="tab" v-for="item in items">tab {{ $index }}</div>
<div class="create-tab" v-on:click="createTab"></div>
...
      data: function () {
  return {
    items: [...]
  }
},
methods: {
  createTab: function () {
  items.push(newTab)
},
...

      按照题主给的代码进行了修改：

      <body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <h4>Vue demo - Tab</h4>
            <div id="app">
                <div class="tab-box">
                    <span v-for="view in views" v-on:click="currentView=$index" :class="currentView==$index ? 'curr' : ''">{{ view.title }}</span>
                    <a href="#" v-on:click="createView(`tab${views.length + 1}`, `con${views.length + 1}`)">添加</a>
                </div>
                <div class="con-box">
                    <my-view v-bind:view="views[currentView]"></my-view>
                </div>
              
                <template id="con">
                    <div class="con">{{ view.content }}</div>
                </template>
            </div>      
        </div>
    </div>

    <script>
    //注册
    Vue.component('myView', {
        props: ['view'],
        template: '#con'
    })
    var vm = new Vue({
        el:'#app',
        data:{
            currentView: 0,
            views: [
              { title: 'tab1', content: 'con1' },
              { title: 'tab2', content: 'con2' }
            ]
        },
        methods: {
          createView: function (title, content) {
            this.views.push({ title: title, content: content })
          }
        }
    });
    </script>

</body>

      题主你可以对照原来的代码看一下，这段代码直接替换原来的body部分就可以用。

      头像
      影绰
        96128

        可以吧tab1和tab2存放在一个state里面，点击加号后在state里面添加

        头像
        xiaoluoboding
          2.1k2410

          谢邀，我记得vue1.0的时候官方是这么介绍的，vue是数据驱动的组件，这句话其实的核心概念在于数据驱动，你完全可以把tab1、tab2、乃至以+号产生的tabn灌输的数据驱动的概念里。上楼应该能帮助到你。

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题