uniapp 实现主页面刷新组件方法

别凶小晗.

已于 2024-03-21 16:12:47 修改

阅读量775

点赞数 1

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

于 2024-03-21 16:12:13 首次发布

本文链接：https://blog.csdn.net/Wang_MengHan/article/details/136911952

该篇文章介绍了如何在Vue应用中使用条件渲染，通过判断变量`token`的值，动态地在pages/index/index.vue中使用A组件或B组件。通过`import`和`exportdefault`语法引入并使用组件，同时展示了数据获取和组件引用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

components： A组件

<template>
	<view class="content">
		A
	</view>
</template>

components： B组件

<template>
	<view class="content">
		B
	</view>
</template>

pages/index/index

<template>
	<view class="content">
		<block v-if="!token">
			<A ref="AIndex" />
		</block>
		<block v-else>
			<B ref="BIndex" />
		</block>
	</view>
</template>

<script>
	import { A } from "/components/A/index.vue"
	import { B } from "/components/B/index.vue"
	export default {
		components: {
			A,
			B,
		},
		data() {
			return {
				token: '',
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData(){
				if(!this.token){
					this.$refs.AIndex?.getData()
				}else{
					this.$refs.BIndex?.getData()
				}
			},
		}
	}
</script>