陪诊小程序之uniapp(从入门到精通)

1.uniapp如何使用vue3编写页面

复制代码
<template>
	<view class="content">
		<navbar name="navbar组件"></navbar>
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="">
			11111
		</view>
		<button @click="handleClick">点我</button>
		<text>总共购买的水果数量{{totalNum}}</text>
		<my-component></my-component>
		<aComponent></aComponent>
		<navbar></navbar>
		<view v-for="item in list" :key="item.name">
			<view>
				1111
			</view>
			<text>{{item.name}}</text>
			<text>{{item.num}}</text>
		</view>
	</view>
</template>

<script setup>
	import  aComponent  from '../../../project/component/component.vue';
	
	import{ref,reactive,computed} from 'vue'
	import{onLoad} from '@dcloudio/uni-app'
	const title=ref('Hello')
	const list=reactive([
		{name:'apple',num:1},
		{name:'orange',num:2},
		{name:'banana',num:3}
	])
	const handleClick=()=>{
		list.forEach(item=>{
			item.num++
		})
	}
	onLoad(()=>{
		console.log('onLode生命周期')
	})
	const totalNum=computed(()=>{
		return list.reduce((total,cur)=>total+cur.num,0)
	})
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

引入组件的三种方式

全局引入

1.引入

import componentVue from './component/component.vue'

2.全局注册

export function createApp() {

const app = createSSRApp(App)
app.component('my-component',componentVue)

return {

app

}

}

3.页面中引入

<my-component></my-component>

局部引入

<script setup>

import aComponent from '../../../project/component/component.vue';

import{ref,reactive,computed} from 'vue'

import{onLoad} from '@dcloudio/uni-app'

const title=ref('Hello')

const list=reactive([

{name:'apple',num:1},

{name:'orange',num:2},

{name:'banana',num:3}

])

const handleClick=()=>{

list.forEach(item=>{

item.num++

})

}

onLoad(()=>{

console.log('onLode生命周期')

})

const totalNum=computed(()=>{

return list.reduce((total,cur)=>total+cur.num,0)

})

</script>

复制代码
<aComponent></aComponent>

自动引入

新建文件夹然后新建组件

组件引入

复制代码
	<navbar></navbar>

2.uniapp组件通信props和$emit和插槽语法

props

组件

复制代码
<template>
	<view>
		navbar组件
	</view>
</template>

<script setup>
import { defineProps } from 'vue';
defineProps(['name','content'])

</script>

<style>

</style>

组件引入数据

复制代码
<navbar name="navbar组件" :content="data"></navbar>

父组件(页面)向子组件传值,如果没传就用默认值

复制代码
<template>
	<view>
		navbar组件
		<view>组件的name属性{{name}}</view>
		<view>组件的content属性{{content}}</view>
		
	</view>
</template>

<script setup>
import { defineProps } from 'vue';
// defineProps(['name','content'])
defineProps({
name:String,	
	content:{
		type:String,
		default:()=>{
			return '默认值';
		}
	}	
})

</script>

<style>

</style>

$emit

navbar.vue

<template>

<view>

navbar组件

<view>组件的name属性{{name}}</view>
<view>组件的content属性{{content}}</view>

<button @click="handleChange">修改content</button>

</view>

</template>

<script setup>

import { defineProps,defineEmits } from 'vue';

// defineProps(['name','content'])

defineProps({

name:String,

content:{

type:String,

default:()=>{

return '默认值';

}

}

})
const emit=defineEmits(['changeData'])
const handleChange=()=>{
emit('changeData','修改后的数据')
}

</script>

<style>

</style>
<navbar :name="navbar组件" :content="data" @changeData="changeData"></navbar>

插槽语法

<navbar :name="navbar组件" :content="data" @changeData="changeData">

<view>我是插槽的内容</view>

</navbar>
<template>

<view>组件</view>

<view>组件的name属性{{name}}</view>

<view>组件的content属性{{content}}</view>

<slot></slot>

<button @click="handleChange">修改content</button>

</template>

<script setup>

import { defineProps,defineEmits } from 'vue';

// defineProps(['name','content'])

defineProps({

name:String,

content:{

type:String,

default:()=>{

return '默认值';

}

}

})

const emit=defineEmits(['changeData'])

const handleChange=()=>{

emit('changeData','修改后的数据')

}

</script>

<style>

</style>

相关推荐
清风细雨_林木木20 小时前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮20 小时前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple
普通网友21 小时前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php
蜕变菜鸟21 小时前
uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
uni-app
毕设源码-邱学长1 天前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue1 天前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
從南走到北2 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序
canglingyue2 天前
微信小程序截屏与录屏功能详解
微信小程序·小程序
微三云-轩2 天前
区块链系统:解决549 亿元积分商城是否违法的问题
大数据·小程序·重构·区块链·生活