uniapp & vue 父子、子父、兄弟组件之间的传值
以下组件传值适用于uniapp和vue。具体代码如下所示：一、父子组件传值
父传子的关键：父组件在标签上传递，子组件通过props接收。
1.父组件中（传递）//1引入子组件
import zizujian from '@/components/login.vue'
//2注册子组件
export default {
components: {
zizujian
},
}
//3在template中以标签的形式载入，通过数据绑定的形式进行传值
<zizujian :userinfo="this.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 vm2.组件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>
https://aihongxin.com/8144.html
页:
[1]