$children

一、认识

---

$children 当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

二、语法

---

父组件

<template>
  <div>
    <AComp></AComp>
    <button @click="setName">改变子组件 name</button>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
  data() {
    return {};
  },
  methods: {
    setName() {
      this.$children[0].setName("为狗爬出的洞敞开着");
    },
  },
};
</script>

子组件

<template>
  <div>
    {{ name }}
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: "为人进出的门紧锁着"
    }
  },
  methods:{
    setName(content){
      this.name = content;
    }
  }
};
</script>