代码之家 › 专栏 › 技术社区 › niko craft

删除子组件将删除该组件以及在其之后创建的所有子组件

vuejs2 vue.js

niko craft · 技术社区 · 9 年前

这是为什么?

Vue.component('column-component', {
    props: ["columnData", "uniqueId"],
    mounted: function() {
        console.log('mounting column: ' + this.uniqueId)
    },
    beforeDestroy: function() {
      console.log('removing: ' + this.uniqueId)
    },
    template: `
        <div style="float: left; padding: 10px; margin-right: 10px; border: 1px solid black;">aaa</div>`
})

Vue.component('row-component', {
    props: ["rowData", "uniqueId"],
    data: function data() {
      return {
        columns: [],
        columnCount: 0
       }
    },
    mounted: function() {
        console.log('mounting row: ' + this.uniqueId)
    },
    methods: { 
      addColumn() {
        console.log
                    var column = new Object()
          column.uniqueId = this.uniqueId +'.col.'+ this.columnCount
          this.columns.push(column)
          this.columnCount = this.columnCount + 1
      }
    },
    beforeDestroy: function() {
      console.log('removing: ' + this.uniqueId)
    },
    template: `
        <div>
         <div style="margin: 10px; padding: 20px; background: rgba(0,0,0, 0.5);">
            row component: {{rowData.text}}
            <div class="column" v-for="(column, index) in columns">
                    <column-component column-data="abc" :uniqueId="column.uniqueId"></column-component>
            </div>
            <div style="clear: both;"></div>
            <div style="margin-top: 35px;">
                <button @click="addColumn()">add column</button>
            </div>
          </div>
        </div>`
})

new Vue({
    el: '#app',
    template: `
        <div>
            <div v-for="(row, index) in rows">
            <row-component :uniqueId="row.uniqueId" :row-data="row" :key="row.uniqueId"></row-component>
            <button @click="deleteThisRow(index)">remove row</button>
         </div> 
         <button @click="addRow()">add</button>
        </div> 
    `,
    data: {
        rows: [],
        rowCount: 0

    },
    mounted: function() {
        this.addRow()
      this.addRow()
      this.addRow()
    },
    methods: {
            addRow() {
            var row = new Object()
          row.uniqueId = 'row-' + this.rowCount
          row.text = 'row-'+(this.rows.length)
            this.rows.push(row)
          this.rowCount =  this.rowCount + 1
        },
        deleteThisRow: function(index) {
            this.rows.splice(index, 1)

            console.log(this.rows)
        }
    }
})

1 回复 | 直到 9 年前

tony19 thanksd 4 年前

完全更新

好的,我今天学到了一些东西: :key goes on the v-for element . 很多时候 key 在组件或 v-for div 用一个包装组件,这会产生不同。它应该是:

<div class="column" v-for="(column, index) in columns" :key="column.uniqueId">
    <column-component column-data="abc" :uniqueId="column.uniqueId"></column-component>
</div>

和

<div v-for="(row, index) in rows" :key="row.uniqueId">
    <row-component :uniqueId="row.uniqueId" :row-data="row"></row-component>
    <button @click="deleteThisRow(index)">remove row</button>
</div>

Updated fiddle