使用组件细节点

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

  <div id="app">
    <table>
      <tbody>
        <!-- 直接使用 -->
        <!-- <row></row> -->
        <tr is="row"></tr>
      </tbody>
    </table>
  </div>
  <script>
    Vue.component('row', {
      template: "<tr><td>this is row</td></tr>"
    })
    var vm = new Vue({
      el: "#app",
    })
  </script>

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

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

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

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

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

vue 中的 ref

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

  <div id="app">
    <div ref="hello"
        @click="handleClick">
      hello word
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      methods: {
        handleClick: function(){
          console.log(this.$refs.hello)
        }
      },
    })
  </script>

此时控制台打印出：

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

  <div id="app">
父组件监听子组件向外触发的 watch 事件，父组件执行 count 方法
    <counter ref="count1" @watch="count"></counter>
    <counter ref="count2" @watch="count"></counter>
    <div>{{total}}</div>
  </div>
  <script>
    Vue.component("counter", {
      data: function() { // 对应细节1，子组件中 data 必须是函数
        return {
          num: 0
        }
      },
      template: "<div @click='add'>{{num}}</div>", // 子组件添加点击事件
      methods: {
        add: function(){
          this.num++
          this.$emit("watch") // 子组件触发父组件的 watch 事件
        }
      }
    })
    var vm = new Vue({
      el: "#app",
      data: {
        total: 0
      },
      methods: {
        count: function(){
          this.total = this.$refs.count1.num + this.$refs.count2.num
        }
      },
    })
  </script>

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

使用组件细节点

推荐阅读更多精彩内容