父子聊通讯：揭秘 VUE 父子组件通信的那些事儿

父子组件通信是VUE中非常重要的一个概念，它允许父子组件之间进行数据传递和事件触发。在VUE中，父子组件通信可以通过以下几种方式实现：

1. Props： Props是VUE中实现父子组件通信最常用的方式。它允许父组件将数据传递给子组件。 props 是一个特殊的 HTML 属性，它可以把父组件的数据传递给子组件。父组件需要在子组件的标签中使用 props 属性来指定要传递的数据，子组件可以通过 props 访问这些数据。例如：

// 父组件
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world!"
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ["message"]
}
</script>

2. $emit： $emit是VUE中实现父子组件通信的另一种方式。它允许子组件触发事件，父组件可以监听这些事件并做出相应反应。$emit 是一个方法，它允许子组件触发自定义事件。父组件可以使用 v-on 指令来监听子组件触发的事件，并在事件被触发时执行相应的代码。例如：

// 子组件
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit("click")
    }
  }
}
</script>

// 父组件
<template>
  <child-component @click="handleChildClick"></child-component>
</template>

<script>
export default {
  methods: {
    handleChildClick() {
      console.log("子组件被点击了")
    }
  }
}
</script>

3. ref： ref是VUE中实现父子组件通信的第三种方式。ref 可以用来引用一个组件实例，然后可以通过这个引用来访问组件的实例及其属性和方法。 ref 可以通过在子组件的标签上使用 ref 属性来设置。例如：

// 父组件
<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.child.message)
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world!"
    }
  }
}
</script>

4. $children和$parent： $children和$parent是VUE中实现父子组件通信的最后两种方式。$children是指父组件的所有子组件，$parent是指子组件的父组件。$children和$parent可以在需要的时候直接访问。例如：

// 父组件
<template>
  <div>
    <child-component></child-component>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$children)
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world!"
    }
  }
}
</script>

以上是VUE中实现父子组件通信的几种方式。在实际开发中，我们可以根据具体的需求选择合适的方式来实现组件通信。