uniapp父页面调用子页面 组件方法记录

在这里插入图片描述


导文

如何点击父页面,触发子页面函数?
如何点击父页面,修改子页面的值?

如何点击父页面,触发子页面函数

使用的方法是 this.$refs

先写一个子页面的基础内容

在这里插入图片描述
主要是要有要被触发的函数,或者数值。

<template>
    <view class="checkInSharing">
        <uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
            <uni-popup-share></uni-popup-share>
        </uni-popup>
    </view>
</template>

<script>


export default {
    components: {
    },

    data() {
        return {

        }
    },
    props: {
        dateList: {
            type: Object, // 指定dateList应该是一个数组类型
            default: () => { } // 设置默认值,以防父组件没有传递
        }
    },
    // mounted() {

    //     this.checkinDetails()
    // },
    methods: {
        checkinDetails() {
            console.log(`${this.dateList.year}-${this.dateList.month}-${this.dateList.date}`);
            console.log(this.dateList);

        },
        show() {
            console.log(1);
            this.$refs.share.open()
        }
    }
}
</script>

<style lang="scss">
.checkInSharing {}
</style>

父元素

要先把组件引入,给子元素添加ref=

<checkInSharing :dateList="dateList" ref="checkInSharingPage"></checkInSharing>


import { getCheckinDetails, postCheckinCreate } from '@/api/checkIn.js'
import checkInSharing from '../checkInSharing/index.vue'
export default {
	components: {
		checkInSharing
	},

然后在函数中使用

handerCheckin() {
			this.$refs.checkInSharingPage.show()
		},

this.$refs.[子页面函数ref名].[子页面函数方法名]

如何点击父页面,修改子页面的值

使用的方法是 this.$refs

先写一个子页面的基础内容

在这里插入图片描述
主要是要有要被触发的函数,或者数值。

<template>
    <view class="checkInSharing">
        <uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
            <uni-popup-share></uni-popup-share>
        </uni-popup>
    </view>
</template>

<script>


export default {
    components: {
    },

    data() {
        return {
           value:0
        }
    },
    props: {
        dateList: {
            type: Object, // 指定dateList应该是一个数组类型
            default: () => { } // 设置默认值,以防父组件没有传递
        }
    },
    // mounted() {

    //     this.checkinDetails()
    // },
    methods: {
        checkinDetails() {
            console.log(`${this.dateList.year}-${this.dateList.month}-${this.dateList.date}`);
            console.log(this.dateList);

        },
        show() {
            console.log(1);
            this.$refs.share.open()
        }
    }
}
</script>

<style lang="scss">
.checkInSharing {}
</style>

父元素

要先把组件引入,给子元素添加ref=

<checkInSharing :dateList="dateList" ref="checkInSharingPage"></checkInSharing>


import { getCheckinDetails, postCheckinCreate } from '@/api/checkIn.js'
import checkInSharing from '../checkInSharing/index.vue'
export default {
	components: {
		checkInSharing
	},

然后在函数中使用

handerCheckin() {
			this.$refs.checkInSharingPage.value=1
		},

this.$refs.[子页面函数ref名].[子页面数值名]=[要修改的数值]

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关推荐

  1. vue3组合页面调用页面方法

    2024-07-09 21:38:05       23 阅读
  2. 组件调用组件方法

    2024-07-09 21:38:05       45 阅读
  3. flutter 组件调用组件方法

    2024-07-09 21:38:05       19 阅读
  4. 组件调用组件方法组合式 API版)

    2024-07-09 21:38:05       14 阅读
  5. vue组件调用组件方法

    2024-07-09 21:38:05       35 阅读
  6. Vue.js 中组件调用组件方法

    2024-07-09 21:38:05       35 阅读

最近更新

  1. Python利用psutil库进行监控进程和资源

    2024-07-09 21:38:05       0 阅读
  2. SpringBoot RestHighLevelClient 按版本更新

    2024-07-09 21:38:05       0 阅读
  3. 跨域问题几种解决方法

    2024-07-09 21:38:05       0 阅读
  4. Python面试整理-文件处理

    2024-07-09 21:38:05       0 阅读
  5. 分式

    2024-07-09 21:38:05       0 阅读
  6. Spring WebFlux 介绍与效果演示示例

    2024-07-09 21:38:05       0 阅读
  7. django 需要修改的文件

    2024-07-09 21:38:05       0 阅读
  8. Random,ThreadLocalRandom,SecureRandom有什么区别

    2024-07-09 21:38:05       0 阅读
  9. Python 爬虫技术 第05节 异常处理

    2024-07-09 21:38:05       0 阅读
  10. 微信小程序开发:DOM 相关 API 使用详解

    2024-07-09 21:38:05       0 阅读
  11. QtQuick-QML语法

    2024-07-09 21:38:05       0 阅读
  12. Codeforces Round 960 (Div. 2)VP

    2024-07-09 21:38:05       0 阅读
  13. WebAssembly在前端开发中的创新与应用

    2024-07-09 21:38:05       0 阅读

热门阅读

  1. mysql面试题 Day5

    2024-07-09 21:38:05       5 阅读
  2. Xcode简介

    2024-07-09 21:38:05       5 阅读
  3. iOS项目怎样进行二进制重排

    2024-07-09 21:38:05       8 阅读
  4. 相机光学(二十八)——感光度(ISO)

    2024-07-09 21:38:05       6 阅读
  5. 【Adobe】Photoshop图层的使用

    2024-07-09 21:38:05       7 阅读
  6. Rust破界:前端革新与Vite重构的深度透视(上)

    2024-07-09 21:38:05       8 阅读
  7. bash终端快捷键

    2024-07-09 21:38:05       7 阅读
  8. ChatGPT 5.0:一年半后的展望与看法

    2024-07-09 21:38:05       4 阅读
  9. python实现excel数据自动统计

    2024-07-09 21:38:05       5 阅读