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

文章目录


导文

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

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

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

使用的方法是 this.$refs

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

主要是要有要被触发的函数,或者数值。

js 复制代码
<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=

js 复制代码
<checkInSharing :dateList="dateList" ref="checkInSharingPage"></checkInSharing>


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

然后在函数中使用

js 复制代码
handerCheckin() {
			this.$refs.checkInSharingPage.show()
		},

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

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

使用的方法是 this.$refs

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

主要是要有要被触发的函数,或者数值。

js 复制代码
<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=

js 复制代码
<checkInSharing :dateList="dateList" ref="checkInSharingPage"></checkInSharing>


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

然后在函数中使用

js 复制代码
handerCheckin() {
			this.$refs.checkInSharingPage.value=1
		},

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

您好,我是肥晨。

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

相关推荐
上优31 分钟前
uniapp 选择 省市区 省市 以及 回显
大数据·elasticsearch·uni-app
耶啵奶膘12 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o19 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index19 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情1 天前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字1 天前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔1 天前
uniapp rpx兼容平板
uni-app
荔枝吖1 天前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗1 天前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64