目录
我们知道在现在的开发环境下,不管前后端开发都是组件化模块化,这是因为组件的优势无比的巨大,可以进行多次的复用增加开发效率,也可以分类鲜明,便于维护,而我今天所写的就是开发中分割成不同的组件互相传递数据和互动
我的工作中常用地组件通信大致分为三类: 父传子 , 子传父 , 跨组件传值
下面就来分别介绍一下 我常用的这三种传值方法
父子组件的确认方法:我将 B 组件import引入到 A 组件中,那么 B 就是 A 的子组件,A 就是 B 的父组件
简而言之,父传子就是父组件把数据传给子组件,具体就是如下,在子组件的props中定义自定义属性来待接收父组件的数据,有两种方法 如下:
第一种,也是最推荐用的一种,以复杂类型的方式进行声明,这样存储的便是一个地址,可以和父组件的数据进行双向绑定,同步数据,虽然可以双向绑定,但是在Vue2.0中还是不可以直接在子组件中更改父组件的数据,需要用到子传父才行,这点等下会写到
这里只是用 text 举个栗子,具体叫什么都可以哈,只是父子里面需要对应上相同
这个 text 接收到数据后的使用方法和一般data中声明的变量一样,只是不能再子组件中改变他
子组件中: props 定义属性接收
-
<template>
-
<div>
-
<h2>son组件</h2>
-
<p>props:{{ text }}</p>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
// 在此处定义props
-
props: {
-
// props中定义 接收父组件数据的自定义属性,叫什么都可以,我随便起了个text
-
text: {
-
type: String, // type 是用来规定此属性接收到的数据的数据类型
-
default: "未传递时默认的文字" // 这个default是当这个 text 没有接收到传递的数据时的默认值
-
}
-
}
-
}
-
</script>
父组件中: 标签内 传递数据
-
<template>
-
<div id="app">
-
<!--
-
这里的text就是子组件props里定义的text,这两个名字得一致
-
并且传递的数据也要符合 type 规定的数据类型
-
text就是传递字符串,:text就是传递动态数据
-
-->
-
<Son text="我是大娃 传给子啦" />
-
<Son :text="wenzi" />
-
</div>
-
</template>
-
-
<script>
-
import Son from './components/son.vue';
-
export default {
-
data () {
-
return {
-
wenzi: '我是二娃 传给子啦'
-
}
-
},
-
components: {
-
Son
-
}
-
}
-
</script>
如上 虽然我的注释写的很清楚了,但是还是在介绍一下, <Son/> 是子组件的标签,在此标签的基础上书写 子组件props 定义的属性名,并且传递参数具体对应关系和效果如下:
如上就是第一种我最常用的父传子,其实还有一种方法,但是我一般也不用,很不方便,也贴到下边了,这个是以数组方式声明
-
export default {
-
// 在此处定义props
-
props: ['text']
-
}
-
</script>
-
-
刚刚说到了在 Vue2.0 子组件不能直接改父组件的数据,否则会报错,这个解决方法就是在子组件中发起一个 自定义事件 ,在父组件监听这个事件,并且定义一个函数来改变数据,具体操作如下:
子组件: 发起一个自定义事件,等待父组件监听到执行函数
-
<template>
-
<div>
-
<h2>son组件</h2>
-
<p>props:{{ text }}</p>
-
<button @click="changeTextFn">改变文字</button>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
// 在此处定义props
-
props: {
-
// props中定义 接收父组件数据的自定义属性,叫什么都可以,我随便起了个text
-
text: {
-
type: String, // type 是用来规定此属性接收到的数据的数据类型
-
default: "未传递时默认的文字" // 这个default是当这个 text 没有接收到传递的数据时的默认值
-
}
-
},
-
-
methods: {
-
// 按钮点击事件
-
changeTextFn () {
-
// 发起自定义事件,名字叫什么都行,第一个参数是事件名,之后再跟着的都是传递的参数
-
this.$emit('changeFn', '我想变成三娃')
-
}
-
}
-
}
-
</script>
我先在原有的代码上添加了一个<button>按钮,在点击调用的函数中,通过 $emit 来发起事件并且可以传递参数
格式: this.$emit('changeFn', '我想变成三娃')
格式: this.$emit('自定义事件名', 传递的参数)
父组件: 行内监听子组件的 自定义事件名(函数上不用写参数,在 methods 中直接写形参就行)
-
<template>
-
<div id="app">
-
<Son :text="wenzi" @changeFn="changeFn" />
-
</div>
-
</template>
-
-
<script>
-
import Son from './components/son.vue';
-
export default {
-
data () {
-
return {
-
wenzi: '我是二娃 传给子啦'
-
}
-
},
-
-
components: {
-
Son
-
},
-
-
methods: {
-
// 监听子组件自定义事件
-
changeFn (newText) {
-
// 这里的形参接受到的就是子组件中 第二个参数传递的数值
-
this.wenzi = newText
-
}
-
}
-
}
-
</script>
对应关系和效果图如下:
如果两个组件的关系非常的复杂或者没有未产生直接联系，那么通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线（event-bus)
按照我的习惯,我会将事件总线创建到 main.js 中,这个使用原理是将bus挂载到Vue原型上,这样就可以保证所有的组件都能通过 this.bus 访问到事件总线,从而通过同一个事件总线监听同一个事件,具体原理和父子传参差不多,都是 $emit 传递数据, 只不过接收变成了$on
我这次以送礼物举例用了两个关系不大的组件 分别是 男组件 和 女组件 (随便起的名)具体如下图:
发送数据 男组件:
this.bus.$emit('自定义事件名',传递的参数)
-
<template>
-
<div>
-
<h1>男组件</h1>
-
<button @click="sendGiftFn">送礼物</button>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
data () {
-
return {
-
gift: '玫瑰花'
-
}
-
},
-
-
methods: {
-
sendGiftFn () {
-
// 通过 bus 事件总线发起 自定义事件,并且传递参数(第一个是事件名,第二个开始是参数)
-
this.bus.$emit('sendMessage', this.gift)
-
}
-
}
-
}
-
</script>
接收数据 女组件:
this.bus.$on('监听的事件名',(e)=>{ e这个形参所接收的就是监听事件所携带的参数数据 })
-
<template>
-
<div>
-
<h1>女组件</h1>
-
<p>来自男组件的礼物:{{ info }}</p>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
data () {
-
return {
-
info: ""
-
}
-
},
-
-
created () {
-
// e 就是 sendMessage 这个事件所传递的数据
-
this.bus.$on("sendMessage", (e) => {
-
this.info = e;
-
});
-
}
-
}
-
</script>
-
-
<style>
-
</style>
具体效果如下:
综上所述,就是我在工作中总结出来的一些组建通信的方法,希望您看到这里会有所收获
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com