Vue 组件通信方法 — vuex
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 组件通信方法 — vuex相关的知识，希望对你有一定的参考价值。
参考技术A 组件通信的原理在 Vue 两种组件通信方法 中已经讲解过了，本篇文章中主要介绍vuex的原理和用法。vuex是专为vue.js项目开发的集中式存储管理所有组件的状态，并以一种可预测的状态发生变化，简单来说就是这个vuex状态机里面写好了vue项目可能发生的所有信息，任何组件都可以访问它，它会按规则发生通知，使得相应的组件发生预定状态的变化。
如图所示：
Vue 兄弟组件通信（不使用Vuex)
Vue 兄弟组件通信（不使用Vuex）
项目中，我们经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题，但在一些小型的项目中，我们就没有必要去引入vuex。下面简单介绍一下使用传统方法，实现父子组件通信的方法。
简单实例：我们在a组件中点击按钮，将信息传给b组件，从而使b组件弹出。
主要的思路就是：先子传父，在父传子
首先我们在 a.vue 组件中 ，给按钮botton绑定一个handleClick事件，事件中我们通过 this.$emit(） 方法去触发一个自定义事件，并传递我们的参数。
示例中我们通过this.$emit() 去触发isLogFn 这个方法自定义事件，并将log 参数传递出去
a.vue
<template>
<div class="adiv">
<p>a组件</p>
<button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit(‘isLogFn‘,‘log‘)
}
}
}
</script>
<style>
.adiv{
width: 400px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
}
</style>第二步，我们要在父组件中去监听这个自定义事件，去触发对应的方法，并接受a组件传过来的参数。此时我们就完成了子组件向父组件传值的过程。
示例中，<aPage @isLogFn = "lisLogFn"></aPage> 监听isLogFn 去触发我们在父组件中定义的方法lisLogFn，并拿到传过来的 ‘log’ 数据。完成子父传值。
到此，整个过程还没有结束，只是完成了一半。接下来我们要完成父子组件传值，将a组件的信息在传给b组件。
在< bPage > 标签中绑定islog 属性，动态绑定data中的login 字段,在我们通过lisLogFn 方法拿到 ‘data’之后，我们要判断 data 传过来的数据，根据判断结果去改变data（）中的数据，从而将数据传递给b组件
App.vue
<template>
<div id="app">
<aPage @isLogFn = "lisLogFn"></aPage>
<bPage :isLog = "login"></bPage>
</div>
</template>
<script>
import aPage from ‘./components/a.vue‘
import bPage from ‘./components/b.vue‘
export default {
data () {
return {
login: ‘false‘
}
},
name: ‘app‘,
components: {
aPage,
bPage
},
methods: {
lisLogFn (data) {
if (data == ‘log‘) {
this.login = ‘true‘
}
}
}
}
</script>
<style>
</style>最后，b组件中需要创建props，定义一个isLog 属性，这个属性就是我们传过来的数值。然后我们在计算属性中处理这个数据，最终供b组件使用。示例中，我们在v-show="isLogin" 中用来控制弹窗是否打开。
切记！不能直接使用这个props，一定要经过computed处理，原因我引用vue官方说明
b.vue
<template>
<div class="bdiv" v-show="isLogin">我是组件B弹窗</div>
</template>
<script>
export default {
props: [‘isLog‘],
data () {
return {
}
},
computed: {
isLogin () {
if(this.isLog == ‘true‘){
return true
} else {
return false
}
}
}
}
</script>
<style>
.bdiv{
width: 200px;
height: 200px;
border: 1px #000 solid;
margin: 0 auto;
}
</style>总结： 想要实现兄弟组件传值，一定要首先熟悉子父，父子之间的传值。
子父：
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
父子：
- 子组件在props中创建一个属性，用以接收父组件传过来的值
- 在子组件标签中添加子组件props中创建的属性，把需要传给子组件的值赋给该属性
以上是关于Vue 组件通信方法 — vuex的主要内容，如果未能解决你的问题，请参考以下文章