vue中父子组件之间的访问方式-$children-$refs-$parent

父子组件的访问方式，不能将数据展示到视图，但是可以对访问到的数据进行操作

1、通过$children访问子组件的数据（不建议使用）

$children返回的是一个数组，包含所有的子组件对象；
缺点：需要通过索引才能拿到自己想要的子组件，如果删除了某个子组件，会影响到哪去的子组件的结果，所以在实际的开发中比较少用

<template>
  <div class="FuZhuJian">
    <ZiZhuJian/>
    <ZiZhuJian/>
    <button @click="getChildren">获取子组件的数据</button>
  </div>
</template>

<script>
import ZiZhuJian from "@/components/ZiZhuJian";
export default {
  name: "FuZhuJian",
  components: {
    ZiZhuJian
  },
  data() {
    return {
      message:"我是父组件"
    }
  },
  methods: {
    getChildren() {
      console.log(this.$children[0].age);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2、通过$refs访问子组件的数据（常用）

需要和ref一起使用；通过属性去获取子组件，无论去掉哪个子组件，只要不把所对应的ref所删除，就一直可以放到到自己需要的子组件

<template>
  <div class="FuZhuJian">
    <ZiZhuJian ref="one"/>
    <ZiZhuJian ref="two"/>
    <button @click="getChildren">获取子组件的数据</button>
  </div>
</template>

<script>
import ZiZhuJian from "@/components/ZiZhuJian";

export default {
  name: "FuZhuJian",
  components: {
    ZiZhuJian
  },
  data() {
    return {
      message:"我是父组件"
    }
  },
  methods: {
    getChildren() {
      console.log(this.$refs);
      console.log(this.$refs.two);
    }
  }
}
</script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3、通过$parent获取父组件的数据（不建议使用）

通过$parent获取父组件的数据，实际开发中尽量少用，因为这样会导致耦合度太高了；通过这样直接修改父组件的数据或状态，使父组件的状态（数据）飘忽不定，不利于后期的调试和修改。

<template>
  <div class="ZiZhuJian">
    <p>我是子组件：{{ age }}</p>
    <button @click="getParent">获取父组件的数据</button>
  </div>
</template>

<script>
export default {
  name: "ZiZhuJian",
  data() {
    return {
      age: 18
    }
  },
  methods: {
    getParent() {
      console.log(this.$parent);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22