为什么这个组件不能访问它的属性数据？

Question

当以下组件为内联组件时，它可以访问rowData，但作为引用的模板，它不能：

HTML：

<div id="app">
    <div>
      <row-component v-for="(row, index) in rows" :row-data="row" v-on:delete-row="deleteThisRow(index)"></row-component>
    </div>
</div>

<script id="theRow" type="x-template">
  row component: {{rowData}}
  <button @click="$emit('delete-row')">Delete3</button>
</script>

JavaScript：

Vue.component('row-component', {
    props: ["rowData"],
    template: '#theRow'
})

new Vue({
    el: '#app',
    data: {
        rows: ["line1", "line2", "line3", "line4", "line5"]
    },
    methods: {
        deleteThisRow: function(index) {
            this.rows.splice(index, 1);
        }
    }
})

如何让组件识别rowData

https://jsfiddle.net/edwardtanguay/k1tx3z1n/

Answer 1

组件应该只有one root element

<div id="app">
    <div>
      <row-component v-for="(row, index) in rows" :row-data="row" v-on:delete-row="deleteThisRow(index)"></row-component>
    </div>
</div>

<script id="theRow" type="x-template">
    <div>
          row component: {{rowData}}
          <button @click="$emit('delete-row')">Delete3</button>
  </div>
</script> 

请参阅working fiddle