阅读 89

谈谈vue组件通信

Vue介绍

这是我参与更文挑战的第5天,活动详情查看: 更文挑战

Vue是构建用户界面的渐进式框架,是MVVM(model-view-viewmodel)框架,比较注重视图层。Vue可以借助简单的API实现响应式的数据绑定和组合式的视图组件,上手容易,可谓是当前前端开发者的一个福音。组件是Vue中最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码,可以使复杂的页面抽象为多个独立的模块,极大的提高开发效率以及降低后期的维护成本。 还记得刚接触Vue的时候,部门的领导就一直提倡我们组件化开发,能复用的功能尽可能的封装成一个个单独的组件,现在想起来真的时很感谢他们,一旦形成封装组件的习惯,开发起来真的是很得心应手。既然说到了组件,那么就免不了会谈到组件通信,毕竟大多数使用Vue的页面都是由一个个组件组合起来的。下图就是从官网Ctrl C + Ctrl V的一张典型的图片,形象的说明了Vue页面与组件树的映射。

组件树

父子组件通信

父子组件顾名思义就是存在包含关系的组件。上图中的B与C(或D)、E与F(或G、H)、甚至是整个应用与A(或B、E)都是存在父子关系的组件。

父子组件之间的传值方式是:父组件通过prop将值传递给子组件,子组件通过$emit方法将事件名传递给父组件,父组件再使用$on绑定该事件监听传递过来的值。

下面举一个简单的例子相信大家会更加明了:

子组件 Title.vue:

<template>
    <div>
       {{ titleText }}
       <button @click="changTitle"></button>
    </div>
</template>
<script>
export default {
    props: {
        titleText: String
    },
    methods: {
        changeTitle() {
            thid.$emit('doChange', '我的标题已经被改变了')
        }
    
    }
}
</script>
复制代码

父组件 showTitle.vue

<template>
   <div>
       <Title :titleText="titleText" @doChange="doChange"></Title>
   </div>
</template>
<script>
import Title from './Title.vue'
export default {
     data(){
        return {
            TitleText: '展示出我的标题了'
        }
    },
    methods: {
        doChange(val) {
            console.log(val) // val 便是子组件传递过来的值
        }
    }
}
</script>
复制代码

兄弟组件通信

兄弟组件其实可以理解为同级之间的组件,通俗一点理解就是同属于一个父组件下的组件。上图中的A与B(或E)、C与D、F与G(或H)都是兄弟组件。

兄弟组件之间的通信其实也很好理解,两个兄弟之间最大的联系是什么呢,当然是有同一个父亲了,没有相同的父亲,自然也不会是亲兄弟了,所以最直观的通信方式便是通过父亲这个纽带了。举个栗子,如果C和D之间想要传递一个参数,那么C可以先将这个参数传递给B(子组件传值给父组件),然后B再将该值传递给D(父组件传值给子组件),兄弟之间的传值就这样轻松地解决了。

兄弟组件的通信还可以通过创建EventBus来实现:

首先要在项目中创建一个bus.js文件,代码如下

import Vue from 'vue'
const bus = new Vue()
export default bus
复制代码

然后在需要通信的兄弟组件中引入bus文件

import bus from 'bus.js'
复制代码

在需要传递参数的组件中使用bus.$emit()

bus.$emit('test', '1233')
复制代码

在需要接受参数的组件中使用bus.$on()

bus.$on('test', data=>{
   console.log(data) // 输出1233
})
复制代码

跨级组件通信

跨级组件通信其实就是祖孙组件甚至是更远关系组件的通信。跨级组件通信的方式有很多种,上面所提到的创建bus的方式在这里也同样受用。

跨级组件还可以使用Vuex来传值,Vuex可以帮助我们管理共享状态,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题,将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上(Vuex具体使用方法可以在Vuex官网学习)。

provide/inject也是跨级组件通常使用的一种传值方式

provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,后代组件中,我们可以使用 inject 来接收 provide 提供的数据或方法,举个简单的小栗子来看一下

祖先组件

<template>
    <div>
    {{ title }}
    </div>
</template>
<script>
    export default {
        provide() {
            return {
                title: this.title
            }
        },
        data() {
            return {
                title: '标题啦啦'
            }
        }
    
    }
</script>
复制代码

孙组件

<template>
  <div>{{ title }}</div>
</template>

<script>
export default {
  inject: ["title"],
  mounted() {
    console.log(this.title)
  },
};
</script>
复制代码

文章有不足之处还请大家多多指教。

文章分类
前端
文章标签