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>
)
