vue中的$parent和$child

在 Vue 中， $parent 表示当前组件的父组件实例，而 $children 表示当前组件的直接子组件实例集合（是一个无序的数组）。
 
通过 $parent ，子组件可以访问父组件的属性和方法。例如在子组件的方法中，可以使用 this.$parent.xxx 来获取父组件的属性或调用父组件的方法。
 
而父组件可以通过 $children 来获取子组件的实例，从而访问子组件的属性或调用子组件的方法。但需要注意的是， $children 并不保证顺序，也不是响应式的。如果要获取特定子组件的属性或调用方法，通常更好的做法是使用 $refs 。
 
以下是一个示例，展示了父组件向子组件传值，以及子组件调用父组件方法的过程：
 
父组件：
 
<template>
  <div>
    <h1>父组件</h1>
    <h-child></h-child> 
  </div>
</template>

<script>
// 引入子组件
import HChild from './HChild.vue' 
export default {
  name: 'Parent',
  components: {
    HChild
  },
  data() {
    return {
      msg: 'data from parent' 
    }
  },
  methods: {
    fun() {
      console.log('parent fun') 
    }
  }
}
</script>
 
 
子组件：
 
<template>
  <div>
    <h1>子组件</h1>
    <button @click="showParent">调用父组件的数据和方法</button> 
  </div>
</template>

<script>
export default {
  name: 'HChild',
  methods: {
    showParent() {
      // 获取到所有的子组件
      console.log(this.$parent) 
      // 获取指定子组件中的指定数据
      console.log(this.$parent.msg) 
      // 调用子组件的方法
      this.$parent.fun() 
    }
  }
}
</script>
 
 引入子组件的过程：
 
要引入子组件，首先需要在父组件的选项中进行声明。例如，使用  import  语句导入子组件，并在  components  选项中注册子组件：
 
import ChildComponent from './ChildComponent.vue'; 

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent 
  },
  // 其他组件选项
}
 
 
然后，就可以在父组件的模板中使用  <ChildComponent>  标签来插入子组件了：
 
<template>
  <div>
    <!-- 使用子组件 -->
    <ChildComponent /> 
  </div>
</template>
 
另外，在 Vue 中还有一些方法可以在父组件中访问子组件或在子组件中访问父组件，比如使用  $refs 、 $parent  等。
 
 $refs  通常用于在父组件中直接操作子组件的实例，可以给子组件添加  ref  属性，然后通过  this.$refs.refName  来访问子组件。
 
而  $parent  则可以让子组件访问其父组件的实例。但需要注意的是，尽管可以这样访问，在实际开发中应尽量避免子组件直接依赖父组件的数据，因为这可能会导致组件之间的耦合度过高，不利于代码的维护和复用。
 
同时， $children  也可以获取子组件的集合，但它不是响应式的，且不保证顺序，使用时需要注意这些限制。并且，在 Vue 3 中已不推荐使用  $children ，更建议使用  $refs  来获取子组件实例。
 
例如，在父组件中通过  $refs  访问子组件的方法：
 
父组件模板：
 
<template>
  <div>
    <ChildComponent ref="childRef" /> 
  </div>
</template>
 
 
父组件脚本：
 
export default {
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod(); // 调用子组件的方法
    }
  }
}
 
 
子组件：
 
javascript  复制
export default {
  methods: {
    childMethod() {
      // 子组件的方法
    }
  }
}

在上述示例中，子组件通过 this.$parent 获取到父组件实例，进而访问父组件的 msg 属性和 fun 方法。
 
需注意，尽量避免过度使用 $parent 和 $children 来进行组件通信，因为这样会增加组件之间的耦合性。在实际开发中，根据具体的需求和场景，可以选择更合适的通信方式，例如 props 传递、自定义事件、使用 Vuex 状态管理等。这些方式可以使组件之间的关系更加清晰、可维护性更高。同时，在钩子函数 mounted 中无法获取到父组件中的数据和方法。

如果换成$refs

以下是一个使用  $refs  在 Vue 中获取子组件属性或调用子组件方法的示例代码：
 
父组件：
 
<template>
  <div>
    <h1>父组件</h1>
    <child-component ref="childRef"></child-component> 
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // 通过 $refs 调用子组件的方法
      this.$refs.childRef.childMethod();
    }
  }
}
</script>
 
 
子组件  ChildComponent.vue ：
 
<template>
  <div>
    <h2>子组件</h2>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    childMethod() {
      console.log('子组件方法被调用');
    }
  }
}
</script>