vue通讯

我的性格比较怪
320 阅读4分钟

在Vue应用程序中，通信是至关重要的。Vue提供了几种通信方式，以便不同组件之间可以相互交互和通信。以下是Vue中可用的一些通信方式：

Props

Props是一种Vue组件通信方式，用于从父组件向子组件传递数据。子组件通过定义props来接收来自父组件的数据，父组件则通过绑定props的值来传递数据。这种通信方式是单向的，即只能从父组件向子组件传递数据。

  1. 使用v-bind指令将父组件的数据绑定到子组件的props属性上。

  2. 使用props选项在子组件中定义props属性，用于接收父组件传递过来的数据。

下面是一个使用props通讯方式的Vue组件示例：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      hello: 'Hello, World!'
    }
  }
}
</script>

在这个父组件中，我们使用v-bind指令将父组件的数据绑定到了子组件的message属性上。

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

<script>
export default {
  props: {
    message: String
  }
}
</script>

在子组件中，我们使用props选项定义了一个名为message的属性，用于接收父组件传递过来的数据。在模板中，我们使用{{ message }}来显示这个属性的值。

当父组件渲染时，它会将hello数据通过props属性传递给子组件，子组件接收到数据后会将数据显示在模板中。

这就是props通讯方式的基本使用方法，它能够帮助我们在Vue应用程序中实现父子组件之间的数据传递。

Event

事件是一种Vue组件通信方式，用于从子组件向父组件传递数据。子组件通过使用$emit方法来触发一个事件，并传递一些数据，父组件则通过绑定事件监听器来接收这些数据。这种通信方式也是单向的，即只能从子组件向父组件传递数据。

  1. 在子组件中使用$emit方法触发一个自定义事件，并传递一些数据。

  2. 在父组件中使用v-on指令绑定自定义事件，并在事件处理函数中接收子组件传递过来的数据。

下面是一个使用Event通讯方式的Vue组件示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component @message-clicked="showMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    showMessage(message) {
      alert(message)
    }
  }
}
</script>

在这个父组件中，我们使用v-on指令绑定了一个名为message-clicked的自定义事件，并在事件处理函数showMessage中接收了子组件传递过来的数据。

<!-- 子组件 -->
<template>
  <button @click="onClick">Click me!</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit('message-clicked', 'Hello, World!')
    }
  }
}
</script>

在子组件中，我们使用$emit方法触发了一个名为message-clicked的自定义事件，并传递了一个字符串'Hello, World!'作为数据。

当用户在子组件中点击按钮时，子组件会触发message-clicked事件，并将数据'Hello, World!'传递给父组件。父组件中的showMessage方法会在接收到这个数据时弹出一个对话框，显示这个数据的内容。

这就是Event通讯方式的基本使用方法，它能够帮助我们在Vue应用程序中实现子组件向父组件的数据传递。

Vuex

Vuex是一种Vue应用程序的状态管理库。它允许不同的组件共享状态，并在组件之间进行通信。Vuex的核心概念是store，一个存储应用程序状态的对象。Vuex通过在store中定义状态、mutations、actions、getters等来实现组件之间的通信。

下面是一个使用Vuex通讯方式的Vue组件示例：

<!-- 组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['updateMessage']),
    changeMessage() {
      this.updateMessage('Hello, Vuex!')
    }
  }
}
</script>

在这个组件中，我们使用了Vuex的mapState和mapActions辅助函数来简化store状态的访问和修改。

在模板中，我们使用{{ message }}来显示store中的message状态。在方法中，我们使用了mapActions函数来将updateMessage方法映射到组件中，用于更新store中的message状态。

下面是一个使用Vuex store对象的示例：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'Hello, World!'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage(context, message) {
      context.commit('updateMessage', message)
    }
  }
})

export default store

在store.js文件中，我们创建了一个新的Vuex.Store对象，包含了应用程序的所有状态和方法。在mutations中定义了updateMessage方法，用于更新store中的message状态，在actions中定义了updateMessage方法，用于触发updateMessage方法并提交一个mutation来更新store中的状态。

在组件中，我们通过引入store对象并使用mapState和mapActions辅助函数来访问和修改store中的状态。

这就是Vuex通讯方式的基本使用方法，它能够帮助我们更好地管理和维护Vue应用程序中的状态数据流。

EventBus

EventBus是一种Vue组件通信方式，用于在不同组件之间进行通信。EventBus实际上是一个Vue实例，它充当了中央事件总线的角色。任何组件都可以使用$emit方法来触发一个事件，并传递一些数据，其他组件可以通过绑定事件监听器来接收这些数据。这种通信方式是全局的，即所有组件都可以进行通信。

Provide / Inject

Provide / Inject是一种Vue组件通信方式，用于在祖先组件和后代组件之间传递数据。Provide / Inject的工作方式与props类似，但是它是一种反向数据流通信方式，即祖先组件通过provide方法提供数据，后代组件通过inject方法来注入数据。这种通信方式也是单向的，即只能从祖先组件向后代组件传递数据。

下面是一个使用Provide / Inject通讯方式的Vue组件示例：

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

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello, Provide / Inject!'
    }
  }
}
</script>

在这个组件中，我们在父组件中使用了Provide属性来提供一个名为message的数据给子组件使用。在provide方法中，我们返回一个包含message数据的对象。

下面是子组件的示例：

<!-- 子组件 -->
<template>
  <div>
    <grand-child-component></grand-child-component>
  </div>
</template>

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

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

在子组件中，我们使用了Inject属性来注入message数据，然后在模板中使用{{ message }}来显示message数据。

下面是孙组件的示例：

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

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

在孙组件中，我们同样使用了Inject属性来注入message数据，然后在模板中使用{{ message }}来显示message数据。

通过使用Provide / Inject通讯方式，父组件可以将数据提供给多个子孙组件，而无需在每个子孙组件中手动传递数据。这种方式能够帮助我们更好地组织和维护Vue应用程序的组件通信。

avatar
文章
阅读
粉丝