组件间传值的情况:
子组件→父组件
父组件→子组件
普通组件→普通组件
1、父组件→子组件 father.vue
<template>
<view>
<view>这是父组件</view>
<son :title='title' :content='content'></son>
</view>
</template>
<script>
import son from './son.vue'
export default {
data() {
return {
title: '这是标题',
content: '这是内容'
}
},
components:{
son
}
}
</script>
son.vue
<template>
<view class="box">
<view>这是子组件</view>
<text>父组件传来的参数:{{title}} ~~ {{content}}</text>
</view>
</template>
<script>
export default {
props:['title', 'content']
}
</script>
<style>
.box{
color: #DD524D;
}
</style>
2、子组件→父组件 son.vue
<template>
<view class="box">
<view>这是子组件</view>
<!-- 向父组件传值 -->
<button @click="toFather" type="warn" size="mini">点击向父组件传值</button>
</view>
</template>
<script>
export default {
data() {
return {
text: 'son给father的内容'
}
},
methods:{
toFather() {
this.$emit('sonEven', this.text)
}
}
}
</script>
<style>
.box{
color: #DD524D;
}
</style>
father.vue
<template>
<view>
<view>这是父组件</view>
<son @sonEven='getSonText'></son>
<text style="size: 20rpx;color: #007AFF;">{{fromSon}}</text>
</view>
</template>
<script>
import son from './son.vue'
export default {
data() {
return {
fromSon: ''
}
},
methods:{
getSonText(pram) {
this.fromSon = pram
}
},
components:{
son
}
}
</script>
3、兄弟组件传值
uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听
在b.vue中引入a.vue
a.vue
<template>
<view class="box">
<view>这是a组件</view>
<button type="warn" @click="sendToB">a向b传值</button>
</view>
</template>
<script>
export default {
data() {
return {
msg: '这是a向b传送的内容'
}
},
methods:{
sendToB() {
uni.$emit('aEven', this.msg)
}
}
}
</script>
<style>
.box{
background-color: #DB7093;
border: 1px solid #DB7093;border-radius: 10rpx;
width: 50%;height: 50rpx;
}
</style>
b.vue
<template>
<view>
<view class="b">这是b组件</view>
<A></A>
</view>
</template>
<script>
import A from './a.vue'
export default {
components:{
A
},
created() {
// 监听
uni.$on('aEven', data=>{
console.log('a组件传来的数据:', data)
})
}
}
</script>
<style>
.b{
background-color: #5F9EA0;
border: 1px solid #5F9EA0;border-radius: 10rpx;
width: 90%;height: 100rpx;
}
</style>