一点睛
1 官网:
http://uniapp.dcloud.io/component/README?id=uniui
2 说明
以Calendar 日历组件为例进行说明
二 实例
1 导入插件
2 项目中导入该插件
3 导入后的效果
三 代码
<template>
<view class="content">
<!-- 1 父组件给子组件传值——设参 -->
<!-- 3 子给父传参 -->
<test v-if="flag" :title="title" @myEvent="getNum"></test>
<button type="primary" @click="checkTest">切换test组件</button>
这是子组件传递过来的数据{
{num}}
<testA></testA>
<testB></testB>
<!-- 使用日历组件 -->
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
@change="change"
/>
</view>
</template>
<script>
/* 引入组件 */
import test from '../../components/test.vue'
import testA from '../../components/a.vue'
import testB from '../../components/b.vue'
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
// 导入日历组件
export default {
data() {
return {
title: 'Hello',
flag: true,
num:0
}
},
onLoad() {
console.log('页面加载了')
},
onShow() {
console.log('页面显示了')
},
onReady() {
console.log('页面初次渲染完成了')
},
onHide() {
console.log('页面隐藏了')
},
methods: {
checkTest() {
this.flag = !this.flag
},
// 4 子给父传参
getNum(num){
this.num = num
console.log(num)
}
},
// 组件组件
components: {
test: test,
testA:testA,
testB:testB,
// 注册日志组件
uniCalendar
}
}
</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>