文章目录
导文
如何点击父页面,触发子页面函数?
如何点击父页面,修改子页面的值?
如何点击父页面,触发子页面函数
使用的方法是 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名].[子页面数值名]=[要修改的数值]
您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。