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