VUE父子组件通信大揭秘：你不可不知的窍门

Vue父子组件通信方式

1. props

props是Vue中父子组件通信最基本的方式，它允许父组件向子组件传递数据。props本质上是一个javascript对象，其中包含了要传递给子组件的数据。在父组件中，可以使用props属性来定义要传递的数据，而在子组件中，可以使用props属性来接收这些数据。

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

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

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

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

2. emit

emit是Vue中父子组件通信的另一种方式，它允许子组件向父组件发送事件。在子组件中，可以使用emit方法来发送事件，而在父组件中，可以使用$on方法来监听这些事件。

<!-- 父组件 -->
<template>
  <child-component @my-event="handleMyEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleMyEvent(data) {
      console.log(data)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="emitMyEvent">Emit Event</button>
</template>

<script>
export default {
  methods: {
    emitMyEvent() {
      this.$emit("my-event", "Hello Vue!")
    }
  }
}
</script>

3. $emit

$emit是Vue中父子组件通信的又一种方式，它与emit方法相似，但它可以直接在子组件中使用，而无需在父组件中监听事件。

<!-- 子组件 -->
<template>
  <button @click="$emit("my-event", "Hello Vue!")">Emit Event</button>
</template>

4. $on

$on是Vue中父子组件通信的另一种方式，它与$emit方法相反，它允许父组件监听子组件发出的事件。

<!-- 父组件 -->
<template>
  <child-component @my-event="$on("my-event", handleMyEvent)"></child-component>
</template>

<script>
export default {
  methods: {
    handleMyEvent(data) {
      console.log(data)
    }
  }
}
</script>

5. $refs

$refs是Vue中父子组件通信的最后一种方式，它允许父组件直接访问子组件的实例。

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

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

<!-- 子组件 -->
<template>
  <p>Child Component</p>
</template>

<script>
export default {
}
</script>

总结

Vue父子组件通信有五种方式：props、emit、$emit、$on和$refs。每种方式都有自己独特的用途，在不同的场景下使用不同的方式可以更加灵活和高效地实现父子组件通信。