学习笔记
同vue的父子传值一样，通过属性绑定 ，props接收值
父组件
<template>
<view>
<Aa :text="456"></Aa>
<Ba></Ba>
</view>
</template>
<script>
import Aa from '../../../components/a.vue'
export default {
data() {
return {}
},
components: {
Aa,
}
}
</script>
<style>
</style>
子组件
<template>
<view>
我是a组件{{text}}
</view>
</template>
<script>
export default {
props:['text'],
data() {
return {
data: '我是a组件 传值给b组件'
}
}
}
</script>
<style></style>
2.子传父
统vue一样 使用 $meit传值
父组件
<template>
<view>
<Aa @link='links'></Aa>
</view>
</template>
<script>
import Aa from '../../../components/a.vue'
export default {
data() {
return {
}
},
methods: {
links(res){
console.log(res)
}
},
components:{
Aa,
}
}
</script>
<style>
</style>
子组件
<template>
<view>
我是a组件
<button type="primary" @click="row">传值给父组件</button>
</view>
</template>
<script>
export default {
data() {
return {
data: '我是a组件 传值给b组件'
}
},
methods: {
row() {
uni.$emit('link', this.data)
}
}
}
</script>
<style></style>
3.兄弟传值
使用uni-app 传值 $emit传值 和 $on接收值
入口文件
<template>
<view>
<Aa></Aa>
<Ba></Ba>
</view>
</template>
<script>
import Aa from '../../../components/a.vue'
import Ba from '../../../components/b.vue'
export default {
data() {
return {}
},
components: {
Aa,
Ba
}
}
</script>
<style></style>
a.vue
<template>
<view>
我是a组件
<button type="primary" @click="row">传值给a组件</button>
</view>
</template>
<script>
export default {
data() {
return {
data: '我是a组件 传值给b组件'
}
},
methods: {
row() {
uni.$emit('link', this.data)
}
}
}
</script>
<style></style>
b.vue
<template>
<view>
我是b组件
{{ data }}
</view>
</template>
<script>
export default {
data() {
return {
data: ''
}
},
created() {
uni.$on('link', e => {
console.log(e)
this.data = e
})
}
}
</script>
<style></style>
发表评论