Vue学习小札——2.3 组件使用的一些细节点如果直接 <table><tbody><row></row><tbody>

1：当<table> <ul> <ol> <selected> 中要使用组件<row>

应该这样写：

如果直接 <table><tbody><row></row><tbody><table>，则row将会跟table同级，应为tbody 里只接受tr。

2：在子组件里定义data时，data必须是一个函数，不能是对象。

Vue.component("row",{
      template: '<tr><td>{{content}}</td></tr>',
      data: function(){
      return{
        content:'this is a row'
      }
    }
   })

之所以这样设计，是因为一个子组件不像根组件只会被调用一次，每一个子组件都应该有自己的数据。

3: ref使用

<body>
  <div id="app">
    <counter ref="one" @change="handleChange"></counter>
    <counter ref="two" @change="handleChange"></counter>
    <div>{{total}}</div>
  </div>
     
  <script>
   Vue.component('counter',{
       template: '<div @click="handleClick">{{number}}</div>',
       data: function() {
          return {
            number: 0
          }
       },
       methods: {
         handleClick: function() {
           this.number ++ ;
           //子组件向父组件传值
           this.$emit('change');
       }
     }
   });
   var vm = new Vue({
     el: "#app",
     data: {
      total: 0
     },
     methods: {
       handleChange: function() {
        this.total = this.$refs.one.number + this.$refs.two.number;
       }
     } 
   });
  </script>
</body>

当ref 写在div标签上的时候，通过this.$refs.name，是div标签对应的dom元素

当在一个组件去写ref，然后通过 this.$refs.name,获取的是子组件的引用。