vue组件通信，多种传值方式
2020-01-26 本文已影响0人
编程小橙子
vue.jpg
一、父组件给子组件传递值
①父组件向子组件传值
定义父组件，父组件传递menuList这个数值给子组件
<template>
<div>
<!-- 通过:绑定需要传递是一个数组 -->
<Child :menuList="menuList" />
</div>
</template>
<script>
// 引入子组件
import Child from '../Other/Child';
export default {
data() {
return {
menuList: ['首页', '用户管理', '视频管理', '订单管理']
};
},
components: {
Child
}
};
</script>
<style lang="scss" scoped></style>
②子组件通过props接收父组件传递过来的值
定义子组件，子组件通过 props方法获取父组件传递过来的值
<template>
<div class="box" style="color:blue">
<!-- 拿到父组件传递过来的值可以直接遍历输出 -->
<span v-for="item in menuList" :key="item">{{ item }}</span>
</div>
</template>
<script>
export default {
// 通过props接收父组件传递过来的值
// menuList为父组件需要传递过来的值得名称
// type为指定父组件传递数据的类型
// default为默认为空
props: {
menuList: {
type: Array,
default: ''
}
}
};
</script>
<style lang="scss" scoped>
.box {
width: 300px;
display: flex;
justify-content: space-around;
}
</style>
二、子组件给父组件传递值
①子组件向父组件传值通过$emit
一般需要触发绑定事件进来传值
<template>
<div>
<!-- 通过点击事件给父组件传递值 -->
<button @click="handleClick">传递给父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
arrList: ['java', 'PHP', 'vue', 'react']
};
},
methods: {
handleClick() {
// event-child：自定义事件不支持驼峰
// this.arrList：需要传递的值
this.$emit('event-child', this.arrList);
}
}
};
</script>
<style lang="scss" scoped></style>
②父组件通过@event-child监听子组件传递过来的值
val为子组件传递给父组件的值
<template>
<div>
<!--@event-child:子组件自定义事件 -->
<Child @event-child="handleParent" />
</div>
</template>
<script>
// 引入子组件
import Child from '../Other/Child';
export default {
data() {
return {};
},
components: {
Child
},
methods: {
handleParent(val) {
//val为子组件传递过来的数据
console.log(val); //输出子组件传递给父组件的值
}
}
};
</script>
<style lang="scss" scoped></style>
①this.$children 获取子组件data中的数据
②this.$parent 获取父组件data中的数据
③this.$refs 获取子组件data中的数据
1.父组件直接获取子组件中data中的数据可以直接使用
①this.$children[0]获取到子组件data中的数据或者
②this.$refs.child.arrList获取子组件data中的数据
2.子组件直接获取父组件data中的数据可以直接使用
③this.$parent获取到父组件data中的数据
<template>
<div></div>
</template>
<script>
export default {
data() {
return {
arrList: ['java', 'PHP', 'vue', 'react']
};
},
mounted() {
console.log(this.$parent.parent); //我是父组件
}
};
</script>
<style lang="scss" scoped></style>
<template>
<div><Child ref="child"/></div>
</template>
<script>
// 引入子组件
import Child from '../Other/Child';
export default {
data() {
return {
parent: '我是父组件'
};
},
components: {
Child
},
mounted() {
console.log(this.$children[0].arrList.toString()); //java,PHP,vue,react
console.log(this.$refs.child.arrList.toString()); //java,PHP,vue,react
}
};
</script>
<style lang="scss" scoped></style>
三、非父子组件间的传值
事件总线，建立一个公共的js文件，用来传递消息
在utils下新建一个bus.js文件
import Vue from 'vue';
export default new Vue();
<template>
<div>
<child />
<button @click="busPass">传递</button>
</div>
</template>
<script>
import bus from '../../utils/bus';
import child from '../Other/Child';
export default {
data() {
return {
arrList: ['java', 'js', 'vue']
};
},
methods: {
busPass() {
// child:自定义名称
bus.$emit('child', this.arrList);
}
},
components: {
child
}
};
</script>
<style lang="scss" scoped></style>
使用$on监听
如果只需要监听一次使用$once
<template>
<div>
<span v-for="item in childList" :key="item">{{ item }}</span>
</div>
</template>
<script>
// 引入bus.js
import bus from '../../utils/bus';
export default {
data() {
return {
childList: []
};
},
created() {
this.getBusList();
},
methods: {
getBusList() {
// 使用$on监听
bus.$on('child', val => {
this.childList = val; //将获取的值赋值给data中的childList
console.log(val);
});
}
}
};
</script>
<style lang="scss" scoped></style>
