uni-app组件通信

uni-app的通信方式和vue小程序是一样的 但语法上采用了vue的
 
主要分为 父传子 : props
 
子传父 通过 v-on 简写 @
 
兄弟组件通信 uni.$on
 
首先是父传子
 
父组件
 
<template>
 
<view class=”content”>
 
        <assembly :name=”name”></assembly>
 
    </view>
 
</template>
 
<script>
 
import text from “/assembly/assembly.vue”
 
export default {
 
    data() {
 
return {
 
imageurl: [],
 
name: ‘子组件定义姓名’
 
}
 
},
 
components:{
 
  assembly: text
 
},
 
}
 
</script>
 
然后子组件assembly就可以通过props拿到这个name
 
代码如下
 
<template>
 
<view>{{ name }}</view>
 
</template>
 
<script>
 
export default {
 
data() {
 
return {
 
}
 
},
 
props: [“name”],
 
created(){
 
console.log(this.name);
 
},
 
}
 
</script>
 
这里需要注意 vue中的props是个大对象 而在uni中我们需要用一个 字符串数组来接
 
然后子传父的话 需要子组件调用父组件传递给自己的事件并传参
 
父组件
 
<template>
 
<view class=”content”>
 
        <assembly :name=”name” @getname=”getname”></assembly>
 
    </view>
 
</template>
 
<script>
 
import text from “/assembly/assembly.vue”
 
export default {
 
    data() {
 
return {
 
imageurl: [],
 
name: ‘子组件定义姓名’
 
}
 
},
 
components:{
 
  assembly: text
 
},
 
methods: {
 
  getname(name){
 
  console.log(name);
 
  }
 
}
 
}
 
</script>
 
此时我们定义了一个getname方法并传递给了子组件 并接受一个参数并打印出来
 
然后我们在子组件中调用他
 
<template>
 
<view @click=”getname”>{{ name }}</view>
 
</template>
 
<script>
 
export default {
 
data() {
 
return {
 
}
 
},
 
props: [“name”],
 
created(){
 
console.log(this.name);
 
},
 
methods: {
 
getname(){
 
this.$emit(’getname’,’子组件传给父组件的值’)
 
}
 
}
 
}
 
</script>
 
当我们点击view时 触发子组件自己的getname 然后在这个方法中调用了父组件传来的getname方法 并传递了参数
 
然后是兄弟组件传值
 
例如我们一个父组件同时引用了 texta 和 textb做自己的子组件
 
然后我们可以在texta中写
 
<template>
 
<viev>{{ name }}</view>
 
</template>
 
<script>
 
export default {
 
data() {
 
return {
 
name: ‘初始值’
 
    }
 
},
 
created(){
 
uni.$on(’bingdts’,res=>{
 
this.name = res
 
})
 
}
 
}
 
</script>
 
此时我们A组件就定义了一个bingdts方法 然后我们可以通过B组件 去调用这个方法和传参
 
textb组件写法
 
<template>
 
<view @click=”getname”>{{ name }}</view>
 
</template>
 
<script>
 
export default {
 
data() {
 
return {
 
name: “修改兄弟值”
 
}
 
},
 
methods: {
 
getname(){
 
uni.$emit(’bingdts’,111)
 
}
 
}
 
}
 
</script>
 
然后你就会发现 textb 的方法触发调用texta的bingdts 参数就会实现兄弟组件传值

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64368.shtml

张贴在3