VUE父子组件通信的108个姿势，你试过几个？

1. Props和Emit

Props是父组件向子组件传递数据的属性，通过子组件的props属性接收。Emit是子组件向父组件触发事件，通过父组件的@事件属性监听。

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

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

// 子组件
<template>
  <div>
    {{ message }}
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: ["message"],
  methods: {
    updateMessage() {
      this.$emit("update", `New Message: ${this.message}`)
    }
  }
}
</script>

2. $emit和$on

$emit和$on是Vue实例可以直接使用的事件发射和监听方法。$emit可以触发一个事件，$on可以监听一个事件。

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

  <button @click="updateMessage">Update Message</button>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$emit("update-message")
    }
  }
}
</script>

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

<script>
export default {
  mounted() {
    this.$on("update-message", () => {
      this.message = `New Message: ${this.message}`
    })
  }
  data() {
    return {
      message: "Hello, World!"
    }
  },
}
</script>

3. $dispatch和$broadcast

$dispatch和$broadcast是VUE实例可以直接使用的事件派发和广播方法。$dispatch可以向子组件触发一个事件，$broadcast可以向所有子组件广播一个事件。

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

  <button @click="updateMessage">Update Message</button>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$dispatch("update-message")
    }
  }
}
</script>

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

<script>
export default {
  mounted() {
    this.$on("update-message", () => {
      this.message = `New Message: ${this.message}`
    })
  }
  data() {
    return {
      message: "Hello, World!"
    }
  },
}
</script>

4. $attrs和ref

$attrs是一个特殊的属性，它包含了父组件传递给子组件的所有属性，但不包括props。ref是一个特殊的属性，它指向一个子组件的实例，可以通过它来访问子组件的实例。

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

<script>
export default {
  data() {
    return {
      message: "Hello, World!"
    }
  },
  render(h) {
    return h("child-component", {
      attrs: this.$attrs,
    })
  }
}
</script>

// 子组件
<template>
  <div>
    {{ message }}
    {{ color }}
  </div>
</template>

<script>
export default {
  props: ["message"],
  mounted() {
    console.log(this.$attrs.color) // 输出: "red"
  }
}
</script>