uniapp & vue 父子、子父、兄弟组件之间的传值
以下组件传值适用于uniapp和vue。具体代码如下所示:
一、父子组件传值
父传子的关键:父组件在标签上传递,子组件通过
props
接收。
1.父组件中(传递)
//1引入子组件 import zizujian from '@/components/login.vue' //2注册子组件 export default { components: { zizujian }, } //3在template中以标签的形式载入,通过数据绑定的形式进行传值 <zizujian :userinfo="userinfo"></zizujian >
2.子组件中(接收)
//1通过props接收父组件传过来的值 props:['userinfo'] //2在标签中直接使用 <view>{{userinfo}}</view>
二、子父组件传值
子传父的关键:子组件通过
事件
this.$emit
来向父组件传值。
1.子组件中:(传递)
//1通过事件传值 <view @click="sonlick">点击按钮</view> <script> export default{ methods:{ //2点击事件-向父组件传值 sonlick(){ this.$emit("sendData",this.userinfo) }, } } </script>
2.父组件中:(接收)
//1引入子组件 <script> import zizujian from '@/components/login.vue' export default { //2注册子组件 components: { zizujian }, methods:{ //3通过事件接收 getSonData(res){ console.log('子组件的内容',res) this.avatarUrl = res.avatarUrl this.nickName = res.nickName }, } } </script> //4在template中以标签的形式载入 <zizujian @sendData="getSonData"></zizujian >
三、兄弟组件传值
**组件之间的传值,完全可以通过自定义事件中心,避免多个组件参与传递数据的复杂度!
1.定义事件中心 src/utils/events.js
,在两个兄弟组件中同时导入(主要用于数据传递)
** * 自定义事件中心 * events.js */ import Vue from "vue" const vm = new Vue() export default vm
2.组件A发送数据
<template> <button @click="sendData2"> 发送数据给其他组件 </button> </template> <script> // 导入事件中心 import vm from "../utils/event" export default { data() { return { msg: "子组件数据" } }, methods : { sendData2() { // 事件中心 触发自定义事件 vm.$emit("customEvent", this.msg) } } } </script>
3.组件B接收数据
<template> <p> 等待接受数据:{{ }} </p> </template> <script> // 导入事件中心 import vm from "../utils/event" export default { created() { // 组件加载的时候执行函数,监听自定义事件 this.getData(); }, data() { return { dataFromOther: "等待接受" } }, methods: { getData() { vm.$on("customEvent", value => { // 接受自定义事件传递的数据 this.dataFromOther = value }) } } } </script>