父组件给子组件传值
父组件在使用test子组件的时候传递值
<template>
<view>
<test v-if="flag" :title="title"></test>
<test :msg="msg" @myEvent="getMsg"></test> // 第二步 加：
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
flag: true,
title: "title",
msg: 'msg' // 第一步 写data
}
},
components: {test}
}
</script>子组件通过props来接受外界传递到组件内部的值 (uni的prop是数组，vue的是对象)
<template>
<view>
这是传过来的数据{
{title}}
<button type="primary">给父组件传值</button>
{
{msg}} //第二步 插值展示
</view>
</template>
<script>
export default {
props: { //第一步 props接收
msg: {
type: String,
value: ''
},
title: {
type: String,
value: ''
},
},
}
</script>
<style>
</style>子组件给父组件传值
子组件通过$emit触发事件进行传递参数
<template>
<view>
<button type="primary" @click="sendMsg">给父组件传值</button> //第一步
</view>
</template>
<script>
export default {
data () {
return {
status: '打篮球'
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status) //第二步
}
}
}
</script>父组件定义自定义事件并接收参数
<template>
<view>
<test :msg="msg" @myEvent="getMsg"></test> //第一步
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) { //第二步
console.log(res)
}
},
components: {test}
}
</script>兄弟组件传值 （消息的订阅与发布）
a.vue（发布）
uni.$emit
<template>
<view>
<button @click="addnum">修改b组建数据</button>
</view>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
addnum(){
uni.$emit('updataNum',10) //发布
}
}
}
</script>
b.vue(订阅)
uni.$on
<template>
<view>{
{num}}</view>
</template>
<script>
export default{
data(){
return{
num:0
}
},
created() {
uni.$on('updataNum',num=>{ //订阅
this.num+=num
})
}
}
</script>