uniapp 组件和页面之间进行交互

雨点打透心脏的1/2处 2024-03-30 14:35 61阅读 0赞

一：页面向组件传递数据（或消息）

【方法1】：

1、在页面发送消息，'init'是KEY，后面组件拿对应的数据（或消息）是依赖此KEY的

onLoad() {
        uni.$emit('init', 1);
    }

2、组件监听该消息

mounted() {
        uni.$on('init', function(data) {
            console.log('init data ', data);
        });
    }

3、组件关闭监听该消息

beforeDestroy(){
        uni.$off('init');
    }

【方法2】：

1、给组件添加 ref

<uni-widget ref="uniWidget"/>

2、在组件中定义函数，如需传递数据，可以定义一个或多个入参，比如定义一个refresh函数

methods: {
        refresh(dataList) {
            this.dataList = dataList;
        }
    }

3、在页面中调用refresh函数

this.$refs.uniWidget.refresh(this.dataList);

二：组件向页面传递数据（或消息）

1、在组件中定义KEY并传递需要传递的数据

methods: {
        onClick(data) {
            this.$emit('onItemClick', data);
        }
    }

2、在组件中定义对应的响应函数并实现，注意这里不要加小括号和参数

//正确写法
    <uni-widget @onItemClick="ClickAction"/>
    
    //错误写法
    <uni-widget @onItemClick="ClickAction(data)"/>
    
    methods: {
        ClickAction(data) {
            console.log('ClickAction data ', data);
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，61人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 组件和页面之间进行交互

一：页面向组件传递数据（或消息）【方法1】： 1、在页面发送消息，'init'是KEY，后面组件拿对应的数据（或消息）是依赖此KEY的 onLoad() {

雨点打透心脏的1/2处/ 2024年03月30日 14:35/ 0 赞/ 62 阅读

相关 vue组件（页面）之间的传值方式

一.路由传参 1.`query`方式传参 `query` 方式是使用查询字符串 `?id=xx&name=xx`，给路由传参，不需要修改路由规则的 `path` 属

拼搏现实的明天。/ 2023年02月28日 05:29/ 0 赞/ 777 阅读

相关一页图纸看懂Vue组件之间的交互

一页图纸，顾名思义真的是一页图纸，让我们来慢慢展开。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

以你之姓@/ 2023年02月23日 08:17/ 0 赞/ 152 阅读

相关 uniapp的map组件

uni-app 地图使用的是腾讯地图注：中间不能有多个并列，不然编译不通过。 vue模板只能有一个根目录 <template> <view>

刺骨的言语ヽ痛彻心扉/ 2022年12月08日 05:37/ 0 赞/ 560 阅读

相关 uni组件和页面之间的通信（所有页面共用工具栏）

uni官方文档中写有页面通信方式： [https://uniapp.dcloud.io/api/window/communication?id=emit][https_un

男娘i/ 2021年11月10日 19:24/ 0 赞/ 496 阅读

相关 uniapp loading 组件

> 组件：loading.vue <template> <view> <view class="cu-load load-modal" v-if

「爱情、让人受尽委屈。」/ 2021年09月19日 16:36/ 0 赞/ 996 阅读

相关 uniapp组件汇总

1. [Card卡片][Card] 2. [uni-swiper-dot轮播图指示点][uni-swiper-dot] 3. [Section章节标题][Section]

「爱情、让人受尽委屈。」/ 2021年09月07日 06:13/ 0 赞/ 780 阅读

相关 uniapp组件-Card卡片

官方组件：[https://ext.dcloud.net.cn/plugin?id=22][https_ext.dcloud.net.cn_plugin_id_22] 效

青旅半醒/ 2021年07月26日 02:24/ 0 赞/ 1493 阅读

相关 uniapp组件-button按钮

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

川长思鸟来/ 2021年07月25日 14:27/ 0 赞/ 1663 阅读

相关 uniapp 组件之间利用全局函数穿参

1、在接收参数的组件中监听全局函数 uni.$on('函数名',(形参数)=>{ ... }); 2、在传递参数

淡淡的烟草味﹌/ 2021年07月24日 12:09/ 0 赞/ 638 阅读