组件的存在,如同封装了一个函数,亦或创建了一个可以实现些许功能的包一样,都有复用,维护,以及避免了变量的污染等好处.
对于组件来说,封装了是一整套,包括html,css,js,实现的是一套完整的复用,为了方便修改组件的内容,但是又可以实现不一样的效果,则出现了Vue组件之间的通信,以下首先讲诉最普通的几种通信方式,先熟悉学习起来吧.
1.父组件 -----> 子组件 传值
首先:判定清楚什么是父组件,什么是子组件?
父: 使用其他组件的vue文件
子: 被引入的组件(嵌入)
1.1. 父传子,要先在子组件内定义props变量,准备接收,然后再使用变量
1.2 父组件内, 要展示封装的子组件:
先在<script>标签中引入子组件,并通过components注册局部组件后使用子组件,在标签中以属性方式给props变量传值
2.子组件--->父组件 _自定义事件(事件绑定)
在了解子向父通信之前我们要先知道单向数据流,从父到子的数据流向, 叫单向数据流
Vue中规定 props 里的 变量 , 本身 是 只读 的(值为数组时),而直接在子组件进行修改, 不通知父级, 造成数据不一致性,所以在子向父通信中,我们需要 通过 子组件触发父自定义事件方法实现
2.1在子组件中添加button按钮并为按钮添加点击事件
2.2在子组件中为props添加index属性,并通过this.$emit(“自定义事件名”,实参)触发父组件绑定的自定义事件,导致父methods里事件处理函数被触发执行
3.父组件内补充索引内容, 父 -> 索引 -> 子组件 (用于区分哪个子组件),然后绑定自定义事件和事件处理函数,语法: @自定义事件名="父methods里函数名"
完整代码:
父:App.vue
<template>
<div>
<!--
目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
需求: 每次组件显示不同的数据信息
步骤(口诀):
1. 子组件 - props - 变量 (准备接收)
2. 父组件 - 传值进去
-->
<Product v-for="(obj,ind) in list" :key="ind" :title="obj.proname" :price="obj.proprice" :art="obj.info" :index="ind" @jianyi="fn"></Product>
</div>
</template>
<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProductSon.vue'
export default {
data(){
return {
str: "全栈开发,你必须拥有",
list: [
{ id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
{ id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
{ id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
],
}
},
// 3. 注册组件
components: {
// Product: Product // key和value变量名同名 - 简写
Product
},
methods: {
// 子组件每点击一次按钮价格,父组件中对应的价格就减一
fn(index,num) {
// 如果父组件中点击的list单价<1就不再减少
this.list[index].proprice>1&&(this.list[index].proprice=(this.list[index].proprice-num).toFixed(2))
}
},
}
</script>
<style>
</style>
子:MyProductSon.vue
<template>
<div class="my-product">
<h3>标题:{{title}}</h3>
<p>价格:{{price}}元</p>
<p>{{art}}</p>
<button @click="fn">砍价-1</button>
</div>
</template>
<script>
export default {
props:['title','price','art','index'],
methods: {
fn() {
// this.index是子组件props中index属性在父组件对应的索引值
//kanjia是自定义的事件名,需要与父组件中事件名一致
this.$emit('kanjia',this.index,1)
}
},
}
</script>
<style scoped>
.my-product {
width: 400px;
padding: 20px;
border: 2px solid #000;
border-radius: 5px;
margin: 10px;
}
</style>
3.跨组件通信EventBus(兄弟组件通信)
需求:点击sonB按钮修改sonA中的值
实现步骤:
1.在src/EventBus/index.js 路径处– 创建空白Vue对象并导出
// 创建空白vue对象并导出 [作为事件总线]
import Vue from "vue";
export default new Vue();
2.在components文件夹中分别创建要跨组件通信的两个兄弟组件
3.为兄弟组件设置相应的内容后确定传递数据与接收数据的组件
传递数据组件:sonB.vue 接收数据组件:sonA.vue
4.在App.vue文件中引入局部组件,完成创建并使用
<template>
<div>
<!-- 第三步:在template中使用组件 -->
<sonA></sonA>
<sonB></sonB>
</div>
</template>
<script>
// 第一步:分别引入sonA和sonB组件
import sonA from './components/sonA.vue'
import sonB from './components/sonB.vue'
export default {
// 第二步:通过components创建组件
components:{
sonA,
sonB
}
}
</script>
<style scoped>
</style>
5. 在要传递值的组件(sonB.vue)中引入事件总线EventBus,并通过EventBus.$emit('自定义事
件名',要传递的参数)将内容传到sonA.vue中
<template>
<div>
<p>sonB</p>
<button @click="fn">点我改变sonA的值</button>
</div>
</template>
<script>
import EventBus from '../EventBus/index.js'
export default {
name:'sonB',
methods: {
fn() {
EventBus.$emit('bian','跟我走')
}
},
}
</script>
<style scoped>
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
6.在要接收值的组件(sonA.vue) 中引入事件总线EventBus并通过created中EventBus.$on('事件名', 函数体)完成内容修改
<template>
<div>
<p>sonA</p>
<p>{{msg}}</p>
</div>
</template>
<script>
import EventBus from '../EventBus/index'
export default {
name:'sonA',
data() {
return {
msg:'aaa'
}
},
created() {
EventBus.$on('bian',(val)=>{
this.msg=val
})
},
}
</script>
<style scoped>
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
4.利用vuex 实现跨组件通信(包括兄弟通信以及无直接关系组件之间的通信)
此方式详情见下篇博客