常用的组件通信
1、父组件向子组件传值
1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量
(2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props:[“属性 名”] props:{属性名:数据类型}
2、子组件向父组件传值
1)在父组件的子组件标签上自定义一个事件,然后调用需要的方法
(2)在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件,数据是以参数的形式进行传递的
3、兄弟组件之间传值
(1)在src中新建一个Bus.js的文件,然后导出一个空的vue实例
(2)在传输数据的一方引入Bus.js 然后通过Bus.e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 , 数 据 是 以 emit(“事件名”,“参数”)来来派发事件,数据是以emit(“事件名”,“参数”)来来派发事件,数据是以emit()的参数形式来传递
(3)在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
1、创建事件中心(eventBus)
/ 1. 创建事件中心
const eventBus = new Vue();
// 将创建出来的空的vue实例挂载Vue构造函数的原型上
Vue.prototype.eventBus = eventBus;
2、通过$emit(‘事件名’, ‘传递的参数’)方法派发一个自定义事件
this.eventBus.$emit('add', 5)
3、通过$on(‘事件名’, callback)方法在mounted生命周期函数中触发这个自定义事件
mounted() {
this.eventBus.$on('add', (val) => {
// code
})
}
4、vuex传参
在需要传参的组件用生命周期created或methods通过commit方法来提交调用mumations中的方法需要传递两个参数第一个是调用mumations的方法,第二个参数是要传递的值
<script>
export default {
data() {
return {
data: {
name: "张三",
age: 18,
aex: "男",
},
};
},
created() {
// 通过commit派发数据
this.$store.commit("addUser", this.data);
},
};
</script>
在vuex的mutations里调用adduser方法把数据存储在state
state: {
user:[]
},
mutations: {
addUser(state,data){
state.user=data
}
在组件里通过 this.$store.state.user来获取state存储的数据
this.$store.state.user;
5、本地存储通信
HTML5的本地存储API中的localStorage与sessionStorage
在使用方法上是相同的,区 别在于sessionStorage
在关闭页面后即被清空,而localStorage
则会-直保存。 存储的内 容是以Json的形式存储的,JSON. parse()用于将一个JSON
字符串转换为对象,
JSON. stringify
()可以将对象转换为字符串。
sessionSorage:
用于临时保存同一 口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
localSorage
:用于长久保存整 个网站的数据,保存的数据没有过期时间,直到手动去除。保存数据到本地
sessionStorage. setItem(' key')
JSON. stringify (value));localStorage. setItem(' key',JSON. stringify (value))
;取得本地的数据:
let datal =JSON. parse (sessionStorage. getItem ('key' ));let data2 = JSON. parse(localStorage. g etItem(' key' )):
空全部数据:
sessionStorage. clear () localStorage. clear()
删除单个数据:
localStorage. removeItem (key) ;sessionStorage. removeItem(key) ;
得到某个索引的key:
localStorage. key (index) ;sessionStorage. key (index) ;
6、vue-router路由传参
点击当前页的某个按钮跳转到另外一个页面去,并将某个值带过去
<div class="examine" @click="details">详情页面</div>
第一种方法 页面刷新数据不会丢失
methods:{
toDetails(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/details/${id}`,
})
}
需要对应路由配置
{
path: '/details/:id',
name: 'details',
component: details
}
第二种方法 页面刷新数据会丢失
通过路由属性中的name来确定匹配的路由,通过params来传递参数
methods:{
insurance(id) {
this.$router.push({
name: 'particulars',
params: {
id: id
}
})
}
对应路由配置: 注意这里不能使用:/id来传递参数了,因为组件中,已经使用params来携带参数了。
{
path: '/particulars',
name: 'particulars',
component: particulars
}
子组件中: 这样来获取参数
this.$route.params.id
7、全局变量传参
设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可。
Globle.js
文件
示例如下
exports.install = function(Vue) {
Vue.prototype.$target = "http://39.100.7.70:81/";
};
在需要的组件内直接使用:
<img :src="'$target'+ item.imgPath" alt="" />
8、$
parent和$
children 传参
上面这张图片是vue官方的解释,通过
p
a
r
e
n
t
和
parent和
parent和children就可以访问组件的实例,拿到实例代表什么?代表可以访问此组件的所有方法和data。接下来就是怎么实现拿到指定组件的实例。
// 父组件中
<template>
<div class="hello_world">
<div>{{msg}}</div>
<com-a></com-a>
<button @click="changeA">点击改变子组件值</button>
</div>
</template>
<script>
import ComA from './test/comA.vue'
export default {
name: 'HelloWorld',
components: { ComA },
data() {
return {
msg: 'Welcome'
}
},
methods: {
changeA() {
// 获取到子组件A
this.$children[0].messageA = 'this is new value'
}
}
}
</script>
// 子组件中
<template>
<div class="com_a">
<span>{{messageA}}</span>
<p>获取父组件的值为: {{parentVal}}</p>
</div>
</template>
<script>
export default {
data() {
return {
messageA: 'this is old'
}
},
computed:{
parentVal(){
return this.$parent.msg;
}
}
}
</script>
要注意边界情况,如在#app上拿 p a r e n t 得 到 的 是 n e w V u e ( ) 的 实 例 , 在 这 实 例 上 再 拿 parent得到的是new Vue()的实例,在这实例上再拿 parent得到的是newVue()的实例,在这实例上再拿parent得到的是undefined,而在最底层的子组件拿 c h i l d r e n 是 个 空 数 组 。 也 要 注 意 得 到 children是个空数组。也要注意得到 children是个空数组。也要注意得到parent和 c h i l d r e n 的 值 不 一 样 , children的值不一样, children的值不一样,children 的值是数组,而$parent是个对象
总结
上面两种方式用于父子组件之间的通信, 而使用props进行父子组件通信更加普遍; 二者皆不能用于非父子组件之间的通信。