Vue.js 组件简介及组件通信（1）

前端

2023-10-14 03:17:49

组件简介

Vue.js 组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装为整体。提高功能的复用性与可维护性，更好的专注于业务逻辑。

组件使用时为自定义HTML标签形式，通过组件名作为自定义标签名。组

组件通信

组件之间的数据通信是 Vue.js 应用程序开发中的常见任务。Vue.js 提供了几种不同的组件通信方式，包括：

父组件向子组件通信 ：父组件可以通过 props 属性向子组件传递数据。子组件可以通过 props 接收数据，并在组件的模板中使用。
子组件向父组件通信 ：子组件可以通过 $emit 方法向父组件发送事件。父组件可以通过 v-on 指令监听子组件发出的事件，并在事件发生时执行相应的操作。
组件之间通信 ：组件之间也可以通过事件总线进行通信。事件总线是一个全局对象，可以用来发布和订阅事件。组件可以通过 $on 方法订阅事件，并在事件发生时执行相应的操作。

组件通信示例

父组件向子组件通信

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

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

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

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

子组件向父组件通信

<!-- 子组件 -->
<template>
  <div>
    <button @click="$emit('increment')">Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$emit('increment')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @increment="incrementCount"></child-component>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    incrementCount() {
      this.count++
    }
  }
}
</script>

组件之间通信

<!-- 组件 A -->
<template>
  <div>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    incrementCount() {
      this.$eventBus.$emit('incrementCount')
    }
  }
}
</script>

<!-- 组件 B -->
<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    this.$eventBus.$on('incrementCount', this.incrementCount)
  },
  methods: {
    incrementCount() {
      this.count++
    }
  }
}
</script>

<!-- 入口文件 -->
<script>
import Vue from 'vue'
import App from './App.vue'

// 创建事件总线
Vue.prototype.$eventBus = new Vue()

new Vue({
  render: h => h(App)
}).$mount('#app')
</script>