vue_组件细节点

1.子组件的is使用

2.子组件的data函数

3.ref的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .activated {color: red}
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <tbody>
        <!-- h5规定tbody里面放tr>td,页面渲染时看起是一样的，但是dom节点渲染不一样-->
        <!-- ul>li, select>option -->
        <row></row>
        <row></row>
        <row></row>
        <!-- is代表是哪个组件  -->
        <td is="row"></td>
        <td is="row"></td>
      </tbody>
    </table>
    <ul>
      <li is="liRow"></li>
      <li is="liRow"></li>
      <li is="liRow"></li>
    </ul>

    <h3>ref获取dom对象</h3>
    <div ref="getDOM" @click="handleClick"> click me</div>
    
    <h3>组件使用ref,获取的是子组件的引用</h3>
    <counter ref="one" @change="handleChange"></counter>
    <counter ref="two" @change="handleChange"></counter>
    <div>{{total}}</div>

  </div>
</body>
<script type="text/javascript">
  Vue.component('row', {
    //子组件定义数据的时候，必须是一个函数
    //让每个子组件都有独立的数据存储
    data () {
      return {
        content: 'this is a row'
      }
    },
    template:'<tr><td>{{content}}</td></tr>'
  })
  Vue.component('liRow', {
    template:'<li>this is a li</li>'
  })

  Vue.component('counter', {
    data () {
      return {
        count: 0
      }
    },
    template: '<div @click="handleClick">{{count}}</div>',
    methods: {
      handleClick () {
        this.count++
        this.$emit('change')
      }
    }
  })

  let vm = new Vue({
    el: '#app',
    data: {
      total: 0
    },
    methods: {
      handleClick () {
        //$refs对象保存的是vue实例中所有的dom引用
        console.log(this.$refs.getDOM.innerHTML = 'hei jack')
      },
      handleChange () {
        // ref用在组件上时，保存的时组件的引用
        console.log(this.$refs.one)
        this.total = this.$refs.one.count + this.$refs.two.count
      }
    }
  })
</script>
</html>