Vue 深入浅出 (六)：组件通信-FunTeaLearn Online Web Tutorials

在 Vue 中，组件通信是一个非常重要的概念。当我们构建一个大型的 Vue 应用程序时，通常会有多个组件之间需要进行数据交互和通信。Vue 提供了多种方法来实现组件通信，本文将为大家介绍这些方法并提供示例代码。

父子组件通信

在 Vue 中，父子组件之间的通信是最常见的场景。父组件可以通过 props 属性将数据传递给子组件，子组件可以通过 $emit 方法将事件传递给父组件。

props

props 是一个用于接收父组件数据的数组，每个元素表示一个 prop，其中包含了 prop 的名称、类型、默认值等信息。父组件可以将数据通过 props 传递给子组件，子组件则可以通过 this.props 访问这些数据。

// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
  <div>
    <child :name="name" :age="age"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  },
  data () {
    return {
      name: '张三',
      age: 18
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    name: String,
    age: Number
  }
}
</script>

在上面的示例中，父组件通过 props 将 name 和 age 数据传递给子组件，子组件则通过 props 接收这些数据并进行展示。

$emit

$emit 是一个用于触发事件的方法，它可以向父组件发送自定义事件，并可以传递参数。父组件可以通过 v-on 指令监听这些事件，并在事件处理函数中获取参数。

// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
  <div>
    <child @sayHello="handleSayHello"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  },
  methods: {
    handleSayHello (name) {
      console.log(`Hello, ${name}!`)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">打招呼</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    handleClick () {
      this.$emit('sayHello', '张三')
    }
  }
}
</script>

在上面的示例中，子组件通过 $emit 方法触发了一个名为 sayHello 的自定义事件，并传递了一个参数。父组件则通过 v-on 指令监听了这个事件，并在事件处理函数中获取了这个参数。

兄弟组件通信

在 Vue 中，兄弟组件之间的通信通常需要通过共同的父组件来实现。父组件可以通过 props 将数据传递给子组件，子组件可以通过 $emit 方法将事件传递给父组件，父组件再将数据通过 props 传递给另一个子组件。

// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
  <div>
    <child1 :name="name" @sayHello="handleSayHello"></child1>
    <child2 :message="message"></child2>
  </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

export default {
  name: 'Parent',
  components: {
    Child1,
    Child2
  },
  data () {
    return {
      name: '张三',
      message: ''
    }
  },
  methods: {
    handleSayHello (name) {
      this.message = `Hello, ${name}!`
    }
  }
}
</script>

<!-- 子组件 1 -->
<template>
  <div>
    <button @click="handleClick">打招呼</button>
  </div>
</template>

<script>
export default {
  name: 'Child1',
  props: {
    name: String
  },
  methods: {
    handleClick () {
      this.$emit('sayHello', this.name)
    }
  }
}
</script>

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

<script>
export default {
  name: 'Child2',
  props: {
    message: String
  }
}
</script>

在上面的示例中，父组件通过 props 将 name 数据传递给了子组件 1，子组件 1 通过 $emit 方法将事件传递给了父组件，父组件再将数据通过 props 传递给了子组件 2，最终子组件 2 展示了这个数据。

跨级组件通信

在 Vue 中，跨级组件之间的通信通常需要通过 provide/inject 或事件总线来实现。

provide/inject

provide/inject 是一种用于跨级组件通信的高级特性，它可以在祖先组件中提供数据，然后在后代组件中注入这些数据。

// www.javascriptcn.com code example
<!-- 祖先组件 -->
<template>
  <div>
    <child></child>
  </div>
</template>

<script>
export default {
  name: 'Grandparent',
  provide () {
    return {
      name: '张三'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <grandchild></grandchild>
  </div>
</template>

<script>
import Grandchild from './Grandchild.vue'

export default {
  name: 'Child',
  components: {
    Grandchild
  }
}
</script>

<!-- 后代组件 -->
<template>
  <div>
    <p>{{ name }}</p>
  </div>
</template>

<script>
export default {
  name: 'Grandchild',
  inject: ['name']
}
</script>

在上面的示例中，祖先组件通过 provide 方法提供了一个名为 name 的数据，后代组件通过 inject 属性注入了这个数据，然后就可以在组件中访问这个数据了。

事件总线

事件总线是一种用于跨级组件通信的简单方法，它可以在任何组件中触发事件，并可以在其他组件中监听这些事件。

// www.javascriptcn.com code example
// 事件总线
const eventBus = new Vue()

// 组件 A
export default {
  name: 'ComponentA',
  methods: {
    handleClick () {
      eventBus.$emit('eventA', 'Hello, world!')
    }
  }
}

// 组件 B
export default {
  name: 'ComponentB',
  created () {
    eventBus.$on('eventA', message => {
      console.log(message)
    })
  }
}

在上面的示例中，事件总线是一个新创建的 Vue 实例，它可以在任何组件中触发事件，并可以在其他组件中监听这些事件。组件 A 在点击事件中触发了一个名为 eventA 的事件，并传递了一个参数。组件 B 则在 created 生命周期中监听了这个事件，并在事件处理函数中获取了这个参数。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d8788ca941bf7134ef1798

Vue 深入浅出 (六)：组件通信