Vue组件通信：青铜到王者的修炼之旅

2024-01-14 10:28:16

序章：Vue单文件组件

Vue的单文件组件是构建Vue应用的核心要素。单文件组件将组件的模板、样式和脚本封装在一个文件中，使组件的开发和维护更加高效。在新建一个Vue项目时，vue-cli会自动为我们生成单文件组件。

第一章：父子组件通信

父子组件通信是最常见的组件通信方式之一。父组件可以向子组件传递数据和方法，子组件也可以向父组件触发事件。父子组件通信有两种主要方式：props和$emit。

1.1 props

props是父组件向子组件传递数据的桥梁。父组件在定义子组件时，可以声明props属性，并为其指定数据类型和默认值。子组件在接收父组件传递的数据后，可以通过props属性访问这些数据。

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

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

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

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

1.2 $emit

emit是子组件向父组件触发事件的途径。子组件在发生特定事件时，可以通过emit方法触发该事件，并传递一些参数。父组件在定义子组件时，可以监听子组件触发的事件，并在事件发生时执行相应的处理逻辑。

<!-- 子组件 -->
<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('clicked', 'Hello, Vue!')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @clicked="handleClicked" />
</template>

<script>
export default {
  methods: {
    handleClicked(message) {
      console.log(message) // Hello, Vue!
    }
  }
}
</script>

第二章：子传父通信

子传父通信是父子组件通信的另一种常见方式。子组件可以向父组件传递数据和方法，而父组件可以监听子组件触发的事件并作出相应处理。子传父通信有两种主要方式：$parent和ref。

2.1 $parent

parent属性可以帮助子组件访问其父组件的实例。通过parent属性，子组件可以调用父组件的方法和访问父组件的数据。

<!-- 子组件 -->
<template>
  <div>{{ parentMessage }}</div>
</template>

<script>
export default {
  computed: {
    parentMessage() {
      return this.$parent.message
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

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

2.2 ref

ref属性可以帮助父组件获取子组件的实例。通过ref属性，父组件可以在子组件实例化后访问其实例对象。

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

<script>
export default {
  mounted() {
    console.log(this.$refs.child) // ChildComponent 实例对象
  }
}
</script>

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

<script>
export default {
  // ...
}
</script>

第三章：兄弟组件通信

兄弟组件通信是指两个没有父子关系的组件之间的通信。兄弟组件通信有几种主要方式：事件总线、provide & inject和mixins。

3.1 事件总线

事件总线是一种全局的事件发布/订阅机制。组件可以通过事件总线发布或订阅事件，从而实现组件之间的通信。

<!-- 组件 A -->
<template>
  <button @click="handleClick">点我</button>
</template>

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

<!-- 组件 B -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  mounted() {
    this.$bus.$on('my-event', (message) => {
      this.message = message
    })
  }
}
</script>

3.2 provide & inject

provide & inject是Vue 2.2中引入的组件通信方式。provide & inject可以帮助组件在不直接引用其他组件的情况下访问和修改其他组件的数据。

<!-- 提供组件 -->
<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

<!-- 注入组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message'],
  // ...
}
</script>

3.3 mixins

mixins是一种可以被多个组件复用的JavaScript对象。mixins可以帮助组件共享一些公共的逻辑和数据。

// mixins.js
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}

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

<script>
import mixins from './mixins.js'

export default {
  mixins: [mixins]
}
</script>

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

<script>
import mixins from './mixins.js'

export default {
  mixins: [mixins]
}
</script>

第四章：祖先后代通信

祖先后代通信是指祖先组件与后代组件之间的通信。祖先后代通信有两种主要方式：provide & inject和dispatch & broadcast。

4.1 provide & inject

provide & inject可以帮助祖先组件向其后代组件传递数据和方法。祖先组件可以使用provide方法提供数据和方法，后代组件可以使用inject方法注入这些数据和方法。

<!-- 祖先组件 -->
<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

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

<script>
export default {
  inject: ['message'],
  // ...
}
</script>

4.2 dispatch & broadcast

dispatch & broadcast是Vue 2.4中引入的组件通信方式。dispatch & broadcast可以帮助组件在不直接引用其他组件的情况下触发和监听事件。

<!-- 祖先组件 -->
<template>
  <ChildComponent />
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$dispatch('my-event', 'Hello, Vue!')
    }
  }
}
</script>

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

<script>
export default {
  mounted() {
    this.$on('my-event', (message) => {
      this.message = message
    })
  }
}
</script>