33.$refs、$parent、$children使用

1、ref为子组件指定一个索引名称，通过索引来操作子组件；
2、this.$parent 可以直接访问该组件的父实例或组件；
3、父组件也可以通过this.$children 访问它所有的子组件，
$parent和$children 可以递归向上或向下无线访问， 直到根实例或最内层的组件。

案例

index.vue

<template>
<div>
  <testVue ref="childVue"></testVue>  <br/><br/>
  <testVue2></testVue2> <br/><br/>
  <button @click="clickChild1">点击访问子组件</button> <br/><br/>
  <button @click="clickChild2">点击访问子组件2</button>
</div>
</template>
<script>
import testVue from './testVue'
import testVue2 from './testVue2'
export default {
  data(){
    return {
      total: 0
    }
  },
  methods: {
    clickChild1(){
      console.log(this.$refs.childVue.counter);
    },
    clickChild2(){
       console.log(this.$children[1].testval);
    }
  },
  components: {
    testVue,
    testVue2  
  }
}
</script>

test.vue

<template>
<div>
  <button @click="parentClick">点击访问父组件</button>
</div>
</template>
<script>
export default {
  data(){
    return {
      counter: 0
    }
  },
  methods: {
    parentClick(){
       console.log(this.$parent.total);
    }
  }
}
</script>

test2.vue

<template>
<div>
</div>
</template>
<script>
export default {
  data(){
    return {
      testval: '2222'
    }
  }
}
</script>