($children,$refs，$parent)的使用 VUE

1. 如果项目很大，组件很多，怎么样才能准确的、快速的寻找到我们想要的组件了？？

$refs首先你的给子组件做标记。demo ：

<firstchild ref="one"></firstchild>

然后在父组件中，通过this.$refs.one就可以访问了这个自组件了，包括访问自组件的data里面的数据，调用它的函数

注意： ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例 当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组

2.$children 他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；

for(let i=0;i<this.$children.length;i++){
          console.log(this.$children[i].children_data);
          this.$children[i].children_fun();
        }

3.$parent在子组件中调用父组件的方法或获得其数据

parents.vue

<template>
  <div id='parents'>
            <p>我是父组件
              <button @click="click1hanlde">获取子组件1的数据与方法</button>
              <button @click="click2hanlde">获取所有子组件的数据和方法</button></p>
             <children1 ref="children1"></children1>
             <children2 ref="children2"></children2>
  </div>
</template>

<script>
  import children1 from './children1.vue'
  import children2 from './children2.vue'
  export default {
    components:{
      children1, children2
    },
    data() {
      return {
        ParentData:'AAA'
      };
    },
    methods:{
      click1hanlde(){
        console.log(this.$refs.children1.children_data)
        this.$refs.children1.children_fun();
      },
      click2hanlde(){
        for(let i=0;i<this.$children.length;i++){
          console.log(this.$children[i].children_data);
          this.$children[i].children_fun();
        }
      },
      showParentData(){
            console.log(this.ParentData)
      }
    }
  };
</script>

children1.vue

<template>
  <div id='children1'>
          <p>我是子组件1: <button @click="getParent_fun">获取父组件的数据和方法 </button></p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        children_data:'children_data1',
      };
    },
    methods:{
      children_fun(){
            console.log('我是子组件1的方法')
      },
      getParent_fun(){
        this.$parent.showParentData();
      }
    }
  };
</script>

children2.vue

<template>
  <div id='children2'>
          <p>我是子组件2</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        children_data:'children_data2',
      };
    },
    methods:{
      children_fun(){
            console.log('我是子组件2的方法')
      }
    }
  };
</script>

1、ref为子组件指定一个索引名称，通过索引来操作子组件； 2、this.children 访问它所有的子组件， 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>