uni-app框架
目錄
什么是uniapp
為什么學(xué)uniapp
uni-app目錄結(jié)構(gòu)
uniapp開(kāi)發(fā)規(guī)范
pages.json頁(yè)面的基本配置
pages頁(yè)面配置
pages對(duì)象的屬性
globalStyle全局配置?
配置基本tabbar
tabbar的基本屬性
condition啟動(dòng)模式配置
具體屬性
組件的基本使用
text文本組件
view組件
size屬性
type屬性
form-type屬性
image組件
mode屬性
uni-app中的樣式
scss嵌套css的使用
基本的數(shù)據(jù)綁定
uni-app中的事件
生命周期函數(shù)
應(yīng)用的生命周期
頁(yè)面的生命周期函數(shù)
uni-app中的網(wǎng)絡(luò)請(qǐng)求
get請(qǐng)求
node.js搭建服務(wù)用于接收get請(qǐng)求
uni-app發(fā)送get請(qǐng)求
post請(qǐng)求
node.js搭建服務(wù)用于接收post請(qǐng)求
uni-app發(fā)送post請(qǐng)求
數(shù)據(jù)緩存
異步設(shè)置緩存
Object中參數(shù)說(shuō)明
同步設(shè)置緩存
參數(shù)說(shuō)明
圖片的上傳和預(yù)覽
從本地相冊(cè)選擇圖片或使用相機(jī)拍照
Object參數(shù)說(shuō)明
預(yù)覽圖片
Object參數(shù)說(shuō)明
條件編譯跨端兼容
跨平臺(tái)兼容
條件編譯
平臺(tái)標(biāo)識(shí)
uniapp中的導(dǎo)航跳轉(zhuǎn)
聲明式跳轉(zhuǎn)
屬性值
編程式導(dǎo)航
保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
跳轉(zhuǎn)到tabBar頁(yè)面，并關(guān)閉其他所有的非tabBar頁(yè)面
關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
組件的創(chuàng)建和使用
組件的生命周期
組件之間的通訊方式
父組件向子組件傳值
子組件從父組件接收值
子組件向父組件傳值
父組件從子組件接收值
兄弟組件之間的相互傳參
兄弟組件
父組件
uni-ui組件庫(kù)的基本使用
以日歷組件的使用為例
首先使用HbuilderX導(dǎo)入插件
然后就直接使用
什么是uniapp
含義：其是使用vue.js開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可以發(fā)布到ios、android、h5以及各種小程序（微信/支付寶/百度/頭條/qq/釘釘）等多個(gè)平臺(tái)
為什么學(xué)uniapp
- 一套代碼可以打包到不同的應(yīng)用平臺(tái)
- 方便入手
- 豐富的生態(tài)環(huán)境
uni-app目錄結(jié)構(gòu)
- pages：vue的組件頁(yè)面一般都放在這里
- static：存放靜態(tài)文件的地方
- unpackage：存放項(xiàng)目最終打包輸出的文件
- App.vue：用來(lái)配置vue的全局組件
- main.js：vue初始化的入口文件
- index.html：最終項(xiàng)目解析之后所生成的單文件項(xiàng)目
- uni.scss：定義公共的css樣式
- manifest.json：項(xiàng)目的配置入口
- pages.json：頁(yè)面以及全局外觀的配置
uniapp開(kāi)發(fā)規(guī)范
- 頁(yè)面文件遵循vue的單文件組件
- 組件標(biāo)簽靠近小程序規(guī)范
- 接口能力靠近微信小程序規(guī)范，但需要將前綴wx換為uni
- 數(shù)據(jù)綁定及事件處理遵循vue規(guī)范，同時(shí)補(bǔ)充了App及頁(yè)面的生命周期
- 為兼容多端運(yùn)行，建議使用flex布局進(jìn)行開(kāi)發(fā)
pages.json頁(yè)面的基本配置
pages頁(yè)面配置
配置的vue組件一般都放在page目錄中，若要使該組件生效則需要將該vue組件的路徑path寫(xiě)在pages.json內(nèi)pages數(shù)組中（該數(shù)組內(nèi)每一項(xiàng)都是一個(gè)對(duì)象），并且pages數(shù)組中第一項(xiàng)vue頁(yè)面表示應(yīng)用的啟動(dòng)頁(yè)；其中每個(gè)對(duì)象表示一個(gè)頁(yè)面的配置，多個(gè)對(duì)象之中用逗號(hào)相隔。
pages對(duì)象的屬性
globalStyle全局配置?
在pages.json內(nèi)通過(guò)globalStyle屬性進(jìn)行全局配置
作用：用于設(shè)置應(yīng)用的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。
注意：頁(yè)面配置內(nèi)每個(gè)頁(yè)面的style配置會(huì)將全局配置覆蓋
配置基本tabbar
若一個(gè)應(yīng)用是一個(gè)多tab應(yīng)用，可以通過(guò)tabbar配置項(xiàng)指定tab欄的表現(xiàn)，以及tab切換時(shí)顯示的對(duì)應(yīng)頁(yè)
tabbar的基本屬性
其中l(wèi)ist接收一個(gè)數(shù)組，數(shù)組中的每一項(xiàng)都是一個(gè)對(duì)象，屬性值如下
注意：
- 當(dāng)設(shè)置的position為top時(shí)，將不會(huì)顯示icon
- tabBar中的list是一個(gè)數(shù)組，只能配置最少兩個(gè)、最多五個(gè)tab，tab按數(shù)組的順序排序
- tabbar的頁(yè)面展現(xiàn)過(guò)一次后就會(huì)保留在內(nèi)存中，再次切換到該tabbar頁(yè)面。只會(huì)觸發(fā)頁(yè)面的onShow函數(shù)，不會(huì)再觸發(fā)onLoad函數(shù)
- pagePath為點(diǎn)擊后跳轉(zhuǎn)頁(yè)面的路徑
condition啟動(dòng)模式配置
啟動(dòng)模式配置僅在開(kāi)發(fā)期間生效，模擬直達(dá)頁(yè)面的場(chǎng)景，如小程序轉(zhuǎn)發(fā)后用戶點(diǎn)擊所打開(kāi)的頁(yè)面
具體屬性
list內(nèi)的屬性
注意：list數(shù)組里面由多個(gè)對(duì)象組成，每個(gè)對(duì)象所具有的屬性如下
組件的基本使用
前言：uni-app為開(kāi)發(fā)者提供了一系列基礎(chǔ)組件，類似html里的基礎(chǔ)標(biāo)簽元素，雖然uni-app不推薦使用HTML標(biāo)簽，但實(shí)際上若開(kāi)發(fā)者寫(xiě)了div等h5標(biāo)簽，在編譯到非H5平臺(tái)時(shí)也會(huì)被編譯成view標(biāo)簽，類似的還有span轉(zhuǎn)text、a轉(zhuǎn)navigator等，包括css里的選擇器也會(huì)轉(zhuǎn)；但為了管理方便，策略統(tǒng)一，新寫(xiě)代碼時(shí)仍建議使用view等標(biāo)簽
text文本組件
注意：
- text組件相當(dāng)于行內(nèi)標(biāo)簽（span），在同一行顯示
- 除了文本節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無(wú)法長(zhǎng)按選中
- ensp：中文空格一半大小；emsp：中文空格大小；nbsp：根據(jù)字體控制空格大小
view組件
前言：view屬性相當(dāng)于HTML中的div標(biāo)簽
button組件
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
| size | String | default | 按鈕的大小 |
| type | String | default | 按鈕的樣式類型 |
| plain | Boolean | false | 按鈕背景色是否透明 |
| disabled | Boolean | false | 是否禁用 |
| loading | Boolean | false | 是否帶loading圖標(biāo) |
| hover-class | String | button-hover | 指定按鈕按下去的樣式類，當(dāng)屬性為none時(shí)沒(méi)有點(diǎn)擊效果 |
| hover-start-time | Number | 20 | 按住多久后出現(xiàn)點(diǎn)擊態(tài)單位ms |
| hover-stay-time | Number | 20 | 手指松開(kāi)后生態(tài)保存時(shí)間，單位ms |
| form-type | String | 用于form標(biāo)簽，點(diǎn)擊后分別觸發(fā)form組件的submit/reset事件 |
size屬性
- default：默認(rèn)大小
- mini：小尺寸
type屬性
- primary：微信小程序?yàn)榫G色，app、h5、百度小程序、支付寶小程序?yàn)樗{(lán)色，頭條小程序?yàn)榧t色，qq小程序?yàn)闇\藍(lán)色
- default：白色
- warn：紅色
form-type屬性
- submit：提交表單事件
- reset：重置表單事件
image組件
mode屬性
注意：
- image組件默認(rèn)寬度300px、高度225px
- src僅支持相對(duì)路徑、絕對(duì)路徑，支持base64編碼
- webp格式圖片、app-vue下，ios不支持，android支持；app-nvue下，ios和android均支持。
uni-app中的樣式
rpx：響應(yīng)式px，一種根據(jù)屏幕寬度自適應(yīng)的動(dòng)態(tài)單位
理解：以750寬度的屏幕為基準(zhǔn)，750rpx恰好為屏幕的寬度，屏幕變寬，那么rpx實(shí)際顯示效果也會(huì)等比放大?
使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表
語(yǔ)法：@import(url)
導(dǎo)入本頁(yè)面相同路徑下的add.css文件
<style>@import url("add.css"); </style>注意：
- 在uniapp中支持基本的常用選擇器，如class、id、標(biāo)簽名選擇器等，但是不能使用通配符*選擇器
- uniapp中的page標(biāo)簽相當(dāng)于body節(jié)點(diǎn)
- 定義在App.vue中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。在pages目錄下的vue文件定義的樣式為局部樣式，只會(huì)作用于對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋App.vue中的樣式
scss嵌套css的使用
<template><view class="box"><text>唱歌跳舞打籃球</text></view> </template> <script> </script> <style lang="scss">.box{width: 100px;height: 100px;background-color: aqua;text{background-color: red;}} </style>注意：
- 使用時(shí)需要下載scss插件
- uni.scss中還定義了公共的樣式屬性，可以直接拿來(lái)使用（直接用屬性替換對(duì)應(yīng)的顏色）
基本的數(shù)據(jù)綁定
<template><view><view>數(shù)據(jù)綁定的學(xué)習(xí)</view><!-- 插值表達(dá)式 --><view>{{msg}}</view><!-- 動(dòng)態(tài)綁定屬性，v-bind也可以省略不寫(xiě) --><image v-bind:src="imgUrl"></image><!-- v-for綁定 --><view v-for="(item,index) in arr">序號(hào)：{{index}} 名字：{{item.name}} 年齡：{{item.age}}</view></view> </template> <script>export default{data(){return{msg:"hello world",imgUrl:"https://www.jd.com/favicon.ico",arr:[{name:"lili",age:18},{name:"lan",age:19}]}}} </script>uni-app中的事件
<template><view><view>uni-app中的事件</view><!-- 點(diǎn)擊事件 --><button type="button" v-on:click="clickHandle('參數(shù)信息',$event)">點(diǎn)擊</button></view> </template> <script>export default{methods:{clickHandle(num,e){console.log("傳遞的參數(shù)為："+num+"\n事件對(duì)象為：",e)}}} </script>生命周期函數(shù)
應(yīng)用的生命周期
生命周期含義：一個(gè)對(duì)象從創(chuàng)建、運(yùn)行、銷毀的整個(gè)過(guò)程被稱為生命周期
生命周期函數(shù)：生命周期中的每個(gè)階段都會(huì)伴隨著一個(gè)函數(shù)的觸發(fā)，這些函數(shù)被稱為生命周期函數(shù)
注意：應(yīng)用的生命周期函數(shù)應(yīng)該定義在App.vue內(nèi)
<script>export default {onLaunch: function() {console.log('項(xiàng)目啟動(dòng)了')},onShow: function() {console.log('程序進(jìn)入前臺(tái)頁(yè)面')},onHide: function() {console.log('程序即將進(jìn)入后臺(tái)')},onError:function(err){console.log("出現(xiàn)異常了",err)}} </script>頁(yè)面的生命周期函數(shù)
onPullDownRefresh：監(jiān)聽(tīng)頁(yè)面下拉刷新?tīng)顟B(tài)
onReachBottom：監(jiān)聽(tīng)頁(yè)面觸底的事件（前提頁(yè)面高度，高于屏幕高度-可滾動(dòng)）
注意：
- 頁(yè)面的生命周期函數(shù)一般都定義在每個(gè)頁(yè)面組件內(nèi)
- onLoad函數(shù)和onReady函數(shù)僅會(huì)觸發(fā)一次
- 關(guān)閉下拉刷新用uni.stopPullDownRefresh()方法，觸發(fā)下拉刷新用uni.startPullDownRefresh()函數(shù)
- 頁(yè)面觸底的事件中觸底距離可以在通過(guò)pages.json文件內(nèi)設(shè)置onReachBottomDistance屬性來(lái)設(shè)置，默認(rèn)為50
uni-app中的網(wǎng)絡(luò)請(qǐng)求
語(yǔ)法：uni.request(object)
object對(duì)應(yīng)的參數(shù)
| 參數(shù)名 | 類型 | 必填 | 默認(rèn)值 | 說(shuō)明 |
| url | String | 是 | 請(qǐng)求的url | |
| data | Object/String/ArrayBuffer | 否 | 請(qǐng)求的參數(shù) | |
| header | Obhect | 否 | 設(shè)置請(qǐng)求的請(qǐng)求頭 | |
| method | String | 否 | Get | 請(qǐng)求方法 |
| timeout | Number | 否 | 30000 | 請(qǐng)求超時(shí)時(shí)間，單位ms |
| success | Function | 否 | 調(diào)用成功后執(zhí)行的回調(diào)函數(shù) | |
| fail | Function | 否 | 調(diào)用失敗后執(zhí)行的回調(diào)函數(shù) | |
| dataType | String | 否 | json | 傳輸?shù)臄?shù)據(jù)格式 |
| responseType | String | 否 | text | 接受的數(shù)據(jù)格式 |
get請(qǐng)求
node.js搭建服務(wù)用于接收get請(qǐng)求
//引入http內(nèi)置模塊 var http=require("http") //創(chuàng)建http服務(wù) var server=http.createServer() server.on("request",(req,res)=>{//拼接并解析請(qǐng)求的urlconst myurl=new URL(req.url,"http://localhost:3000/")//獲取請(qǐng)求url的參數(shù)迭代器var b=myurl.searchParams//對(duì)該迭代器進(jìn)行遍歷for (const [key,value] of b) {console.log(key,value);}//設(shè)置響應(yīng)編碼格式res.setHeader("content-Type","text/html;charset=utf-8")//設(shè)置返回內(nèi)容res.write("好吧，你已經(jīng)成功了")res.end() }) server.listen(3000,()=>{console.log("server start") })uni-app發(fā)送get請(qǐng)求
<template><view><button @click="get()">發(fā)送get請(qǐng)求</button></view> </template> <script>export default{methods:{get(){//發(fā)送get請(qǐng)求uni.request({url:"http://localhost:3000/?name=lili",method:"get",success(res){//打印接收到的返回值console.log("請(qǐng)求的返回值為："+res.data)}})}}} </script>注意：res.data為接收到的返回值
post請(qǐng)求
node.js搭建服務(wù)用于接收post請(qǐng)求
//引入http內(nèi)置模塊 var http=require("http") //創(chuàng)建http服務(wù) var server=http.createServer() server.on("request",(req,res)=>{let data=""; //接收post請(qǐng)求傳遞的參數(shù)req.on("data",chunk=>{data+=chunk})req.on("end",()=>{console.log(data);})//設(shè)置響應(yīng)編碼格式res.setHeader("content-Type","text/html;charset=utf-8")//設(shè)置返回內(nèi)容res.write("好吧，你已經(jīng)成功了")res.end() }) server.listen(3000,()=>{console.log("server start") })uni-app發(fā)送post請(qǐng)求
<template><view><button @click="post()">發(fā)送post請(qǐng)求</button></view> </template> <script>export default{methods:{post(){//發(fā)送post請(qǐng)求uni.request({url:"http://localhost:3000",method:"post",data:{"name":"lili","age":23},success(res){//打印接收到的返回值console.log("請(qǐng)求的返回值為："+res.data)},fail(err){//打印失敗信息console.log("您失敗了：",err)}})}}} </script>數(shù)據(jù)緩存
異步設(shè)置緩存
在本地儲(chǔ)存中設(shè)置數(shù)據(jù)：uni.setStorage(Object)
在本地儲(chǔ)存中獲取數(shù)據(jù)：uni.getStorage(Object)
在本地儲(chǔ)存中移除數(shù)據(jù)：uni.removeStorage(Object)
理解：將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的key中，會(huì)覆蓋掉原來(lái)key的內(nèi)容，但是以上的接口為異步接口
Object中參數(shù)說(shuō)明
<template><view><button type="primary" @click="setStorage()">存儲(chǔ)數(shù)據(jù)</button><button type="primary" @click="getStorage('id')">獲取數(shù)據(jù)</button><button type="primary" @click="removeStorage('id')">移除數(shù)據(jù)</button></view> </template> <script>export default{methods:{setStorage(){//向本地存數(shù)據(jù)uni.setStorage({key:"id",data:80,success(){console.log("存儲(chǔ)成功！")}})},getStorage(data){//從本地獲取數(shù)據(jù)uni.getStorage({key:data,success(res){console.log("獲取到的數(shù)據(jù)為："+res.data)}})},removeStorage(data){//從本地移除數(shù)據(jù)uni.removeStorage({key:data,success(res){console.log("移除數(shù)據(jù)成功！",res)}})}}} </script>同步設(shè)置緩存
同步設(shè)置緩存：uni.setStorageSync(key,data)
同步獲取緩存：uni.getStorageSync(key)
同步移除緩存：uni.removeStorageSync(key)
參數(shù)說(shuō)明
<template><view><button type="primary" @click="setStorageSync('id',23)">同步存儲(chǔ)數(shù)據(jù)</button><button type="primary" @click="getStorageSync('id')">同步獲取數(shù)據(jù)</button><button type="primary" @click="removeStorageSync('id')">同步移除數(shù)據(jù)</button></view> </template> <script>export default{methods:{setStorageSync(key,data){uni.setStorageSync(key,data);},getStorageSync(key){const res=uni.getStorageSync(key)console.log("獲取到的數(shù)據(jù)為："+res)},removeStorageSync(key){uni.removeStorageSync(key)}}} </script>圖片的上傳和預(yù)覽
從本地相冊(cè)選擇圖片或使用相機(jī)拍照
方法：uni.chooseImage(Object)
Object參數(shù)說(shuō)明
預(yù)覽圖片
方法：uni.previewImage(Object)
Object參數(shù)說(shuō)明
注意：上面的current代表的是當(dāng)前的圖片的路徑
<template><view><button type="primary" @click="chooseImg()">上傳圖片</button><!-- 預(yù)覽圖片 --><image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image></view> </template> <script>export default{data() {return{imgArr:[]}},methods:{chooseImg(){uni.chooseImage({count:5,success:res=>{this.imgArr=res.tempFilePaths}})},previewImg(data){uni.previewImage({current:data,urls:this.imgArr,loop:true,indicator:"number"})}}} </script>條件編譯跨端兼容
跨平臺(tái)兼容
含義：uni-app已經(jīng)將常用的組件，js API封裝到框架中，開(kāi)發(fā)者按照uni-app規(guī)范開(kāi)發(fā)即刻保證多平臺(tái)兼容，大部分業(yè)務(wù)均可直接滿足，但是每個(gè)平臺(tái)都有自己的一些特性，因此會(huì)存在著一些無(wú)法跨平臺(tái)的情況
條件編譯
含義：條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺(tái)
語(yǔ)法：#ifdef 平臺(tái)標(biāo)識(shí) …… #endif
平臺(tái)標(biāo)識(shí)
<template><view><!-- #ifdef H5 --><view>我希望在H5頁(yè)面中看見(jiàn)</view><!-- #endif --><!-- #ifdef MP-WEIXIN --><view>我希望在微信小程序頁(yè)面中看見(jiàn)</view><!-- #endif --></view> </template> <script>export default{methods:{onLoad(){//#ifdef H5console.log("我希望在H5內(nèi)中打印")//#endif//#ifdef MP-WEIXINconsole.log("我希望在微信小程序內(nèi)中打印")//#endif}}} </script> <style>/* H5中的樣式 *//* #ifdef H5 */view{color: red;}/* #endif *//* 微信小程序的樣式 *//* #ifdef MP-WEIXIN */view{color: blue;}/* #endif */ </style>注意：條件編譯要寫(xiě)在注釋里面
uniapp中的導(dǎo)航跳轉(zhuǎn)
聲明式跳轉(zhuǎn)
組件：navigator
屬性值
open-type的有效值
編程式導(dǎo)航
保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
語(yǔ)法：uni.navigateTo(object)
object參數(shù)說(shuō)明
跳轉(zhuǎn)到tabBar頁(yè)面，并關(guān)閉其他所有的非tabBar頁(yè)面
語(yǔ)法：uni.switchTab(object)
object參數(shù)說(shuō)明
關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
語(yǔ)法：uni.redirectTo(object)
object屬性
<template><view><view>聲明式導(dǎo)航的學(xué)習(xí)</view><navigator url="/pages/detail/detail">跳轉(zhuǎn)到詳情頁(yè)</navigator><!-- 因?yàn)檫@里的信息頁(yè)為tabBar頁(yè)面 --><navigator url="/pages/message/message" open-type="switchTab">跳轉(zhuǎn)到信息頁(yè)</navigator><view>編程式導(dǎo)航的學(xué)習(xí)</view><button @click="goDetail()">跳轉(zhuǎn)至詳情頁(yè)</button><button @click="goMessage()">跳轉(zhuǎn)至信息頁(yè)</button></view> </template> <script>export default{methods:{goDetail(){uni.navigateTo({url:"/pages/detail/detail"})},goMessage(){uni.switchTab({url:"/pages/message/message"})}}} </script>注意：導(dǎo)航過(guò)程中也可以進(jìn)行頁(yè)面的傳參，通過(guò)？和&拼接的形式，若取得上個(gè)頁(yè)面?zhèn)鬟^(guò)來(lái)的參數(shù)則需要頁(yè)面生命周期onLoad函數(shù)。
組件的創(chuàng)建和使用
前言：在uni-app中，可以通過(guò)創(chuàng)建一個(gè)后綴名為vue的文件，即創(chuàng)建一個(gè)組件成功，其他組件可以將該組件通過(guò)import的方式導(dǎo)入，再通過(guò)components進(jìn)行注冊(cè)即可
<template><view><view>使用組件工具類</view><!-- 使用組件 --><partName></partName></view> </template> <script>//引入組件import Part from "../../components/test.vue"//注冊(cè)組件export default{components:{partName:Part}} </script>組件的生命周期
組件之間的通訊方式
父組件向子組件傳值
<template><view><view>我是父組件</view><!-- 父組件向子組件傳遞title值 --><child :title="title"></child></view> </template> <script>import child from "../../components/child.vue"export default{data(){return{title:"hello uniapp"}},components:{child:child}} </script>子組件從父組件接收值
<template><view><view>我是子組件</view><view>title的值為{{title}}</view> </view> </template> <script>export default{//子組件接收父組件傳遞過(guò)來(lái)的titleprops:['title']} </script>子組件向父組件傳值
<template><view><view>我是子組件</view><button @click="sendNum()">給父組件傳值</button></view> </template> <script>export default{data(){return{num:6}},methods:{sendNum(){//第一個(gè)參數(shù)傳自定義事件名稱，第二個(gè)參數(shù)傳請(qǐng)求參數(shù)this.$emit('myEvent',this.num)}}} </script>父組件從子組件接收值
<template><view><view>我是父組件</view><child @myEvent="getNum"></child></view> </template> <script>import child from "../../components/child.vue"export default{methods:{//num用于接收觸發(fā)了事件傳過(guò)來(lái)的值getNum(num){console.log("子組件傳過(guò)來(lái)的值為："+num)}},components:{child:child}} </script>兄弟組件之間的相互傳參
兄弟組件
<template><view><view>我是兄弟組件1</view><button @click="addNum()">修改組件2中的數(shù)據(jù)</button></view> </template> <script>export default{methods:{addNum(){//觸發(fā)全局事件uni.$emit("updateNum",10)}}} </script> <template><view><view>我是兄弟組件2</view><view>組件2內(nèi)num的值為{{num}}</view></view> </template> <script>export default{data(){return{num:0}},created() {//監(jiān)聽(tīng)全局事件uni.$on("updateNum",(num)=>{this.num+=num})}} </script>父組件
<template><view><view>我是父組件</view><part1></part1><part2></part2></view> </template> <script>import part1 from "../../components/student1.vue"import part2 from "../../components/student2.vue"export default{components:{part1,part2}} </script>uni-ui組件庫(kù)的基本使用
含義：uni-ui是DCloud提供的一個(gè)跨端ui庫(kù)，他是基于vue組件的，flex布局的，無(wú)dom的全端ui庫(kù)
網(wǎng)址：https://ext.dcloud.net.cn/
以日歷組件的使用為例
首先使用HbuilderX導(dǎo)入插件
然后就直接使用
<template><view><view>uni-ui組件庫(kù)</view><uni-calendar:insert="true":lunar="true":start-data="'2019-3-2'":end-data="'2019-5-20'"@change="change"></uni-calendar></view> </template> <script>export default{methods:{change(e){console.log("觸發(fā)了change函數(shù)",e)}},} </script>總結(jié)
- 上一篇： 34 《避开错误决策的四个陷阱》 -豆瓣
- 下一篇： efm8系列单片机c语言编程,EFM8单