使用组件细节点

1. 使用 is 属性解决模板标签出现的 bug

这时，页面显示也是正常的，但是定义的组件出现在 table 标签外，原因是规定 tbody 标签内必须是 tr 标签，所以这里不认 自定义组件的 row 标签。解决方法是使用 is 属性，在 tbody 标签内还是用 tr 标签，但是添加 is 属性，如： 。这样的标签还有 ul 、 ol 、 select 。

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

// 错误写法
    Vue.component('row', {
      data: {
        content: "this is row"
      },
      template: "{{content}}"
    })

这时页面会报错，原因就是子组件中 data 必须是函数：

// 正确写法
  Vue.component('row', {
      data: function(){
        return {
          content: "this is row"
        }
      },
      template: "{{content}}"
    })

3. vue 中的 ref

• 当 ref 写在如 div 标签内时，通过 this.$refs.name 获取到的是标签对应的 dom 元素

  

    

      hello word
    
  
  

此时控制台打印出：

• 当 ref 写在组件内时，通过 this.$refs.name 获取到的是子组件的引用

  

父组件监听子组件向外触发的 watch 事件，父组件执行 count 方法
    
    
    
{{total}}
  
  

这里 this.$refs.count1 就是子组件 counter 的引用