VUE父子组件通信的终极指南：一劳永逸解决你的问题

1. props

props是Vue中父子组件通信最常见的方式之一，它允许父组件向子组件传递数据。props是一个只读的属性，子组件不能修改它。

父组件传递props给子组件的语法如下：

<template>
  <child-component :message="message"></child-component>
</template>

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

子组件接收props的语法如下：

<template>
  <div>{{ message }}</div>
</template>

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

2. $emit

$emit是VUE中父子组件通信的另一种方式，它允许子组件向父组件发送事件。

子组件发送事件的语法如下：

<template>
  <button @click="$emit("updateMessage", message)">Update Message</button>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello World!"
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

父组件接收事件的语法如下：

<template>
  <child-component @updateMessage="updateMessage"></child-component>
</template>

<script>
export default {
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

3. $on

$on是VUE中父子组件通信的第三种方式，它允许父组件监听子组件的事件。

父组件监听子组件事件的语法如下：

<template>
  <child-component @updateMessage="updateMessage"></child-component>
</template>

<script>
export default {
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

子组件发送事件的语法如下：

<template>
  <button @click="$emit("updateMessage", message)">Update Message</button>
</template>

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

4. $refs

$refs是VUE中父子组件通信的第四种方式，它允许父组件访问子组件的实例。

父组件访问子组件实例的语法如下：

<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$refs.child.message = "Hello World!"
    }
  }
}
</script>

子组件暴露自身实例的语法如下：

<template>
  <div>{{ message }}</div>
</template>

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

5. provide/inject

provide/inject是VUE中父子组件通信的第五种方式，它允许父组件向子组件提供数据，子组件可以注入这些数据。

父组件提供数据的语法如下：

<template>
  <child-component>
    <provide>
      <message>{{ message }}</message>
    </provide>
  </child-component>
</template>

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

子组件注入数据的语法如下：

<template>
  <div>{{ message }}</div>
</template>

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