uniapp 组件的通讯及传参

父组件给子组件传值

父组件在使用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>

uniapp 组件的通讯及传参相关推荐

微信小程序组件与页面的传参、方法调用（二）
微信小程序组件与页面的传参.方法调用使用小程序组件时经常不会只用到静态页面显示,需要一定的交互.这时候就需要知道这么传参与方法调用的了首先先放官方的文档,介绍的还是比较清楚详细,有能力的同学请直 ...
vue 多层子组件调用父组件的方法（传参方式bind方法或注入 provide() {}方法）
一,传参方式bind的方法的使用例: 1.ui作为一个对象 data() {return {ui:{}//ui作为一个对象} } 2.初始化中,给ui绑定一个方法editDesignTree,使用b ...
Vue父组件调用子组件的方法并传参的两种方式（用$refs.refName.functionName、window.function）
如需了解儿子怎么控制老子的,传送门:https://s-z-q.blog.csdn.net/article/details/120094689 父组件father.vue <template&g ...
uni-app的事件传参
uni-app的事件传参,和微信方式类似,需要先定义data-,再在函数中获取 <div @click="handleClick" data-big-dog='大狗子'> ...
uni-app 微信小程序分享功能传参接收与调试
uni-app 微信小程序功能传参接收与调试当使用微信小程序进行分享好友功能时,怎样能够联调,查看是否接收到参数,并在被分享人点进来的时候逻辑处理是否正确. 1.分享功能实现分享给朋友 ...
Vue3父子组件间传参通信
Vue3 父子组件间通信前言一.父传子 defineProps 二.子传父 defineEmits 三.子组件暴露属性给父组件 defineExpose 四.依赖注入Provide / Injec ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
易语言多线程时钟多线程数组传参
传参-时钟多线程-数组传参 1.时钟组件 2.数组传参 3.多线程传参教程源码: .版本 2 .支持库 EThread .支持库 spec.局部变量 n, 整数型n ＝取数组成员数 (A_str) ...

uniapp 组件的通讯及传参

父组件给子组件传值

父组件在使用test子组件的时候传递值

子组件通过props来接受外界传递到组件内部的值 (uni的prop是数组，vue的是对象)

子组件给父组件传值

子组件通过$emit触发事件进行传递参数

父组件定义自定义事件并接收参数

兄弟组件传值（消息的订阅与发布）

uni.$emit

uni.$on

uniapp 组件的通讯及传参相关推荐

最新文章

热门文章

uniapp 组件的通讯及传参

父组件给子组件传值

父组件在使用test子组件的时候传递值

子组件通过props来接受外界传递到组件内部的值 (uni的prop是数组，vue的是对象)

子组件给父组件传值

子组件通过$emit触发事件进行传递参数

父组件定义自定义事件并接收参数

兄弟组件传值 （消息的订阅与发布）

uni.$emit

uni.$on

uniapp 组件的通讯及传参相关推荐

最新文章

热门文章

兄弟组件传值（消息的订阅与发布）