component: HTML limitation (Table)

by edith_tang

HTML

<div id="app">
  <table>
    <tbody is="my-component"></tbody>
  </table>
  <!-- 
    1. `<quotation-external>`元素用了三次。当点击后，会发现按钮的名称会同步变化。这是因为这个组件引用的是外部的对象。JavaScript中对象是引用的关系。所以这个对象就是共享的，任何一方修改都会同步。
    2. 我用`<quotation-external />会仅渲染第一次出现的元素，后面的元素都不会被渲染出来，不清楚原因。`
  -->
  <quotation-external></quotation-external><br><br>
  <quotation-external></quotation-external><br><br>
  <quotation-external></quotation-external><br><br>
  
  <!--
  所以还是建议
  -->
  <stand-alone></stand-alone>
  <stand-alone></stand-alone>
  <msg-content></msg-content>
  
  
  <!--
  <quotation-external />
  <quotation-external />
  <quotation-external />  
  -->
</div>

JavaScript

var data = {
	counter: 0
}

Vue.component('my-component', {
	template: '<div>要插入表格中的组件</div>'
})

// 但是在使用 `data`时，和实例有区别，`data`必须是函数，然后将数据 return 出去。
Vue.component('msg-content', {
	template: '<div>有Data的组件 {{ name }}</div>',
  data: function() {
  	return {
    	name: '我是name数据'
    }
  }
})

Vue.component('quotation-external', {
	template: '<button @click="counter++">{{ counter }}</button>',
  data: function() {
  	return data;
  }
})

Vue.component('stand-alone', {
	template: '<button @click="num++">{{ num }}</button>',
  data: function() {
  	return {
    	num: 0
    }
  }
})

var app = new Vue({
	el: '#app'
})