組件定義使用
在項目的/component目錄下存放組件，在要顯示組件的頁面中則分爲3步：導入、註冊和使用。
<template>
<view class="phone">
// <uni-coms />
<uni-coms ></uni-coms> //第三步：使用組件（這裏單標籤雙標籤都可以）
</view>
</template>
<script>
import uniComs from "@/components/uni-coms/uni-coms.vue" //第一步：導入組件
export default {
components: {
uniComs //第二部：註冊組件
}
}
</script>
注意：
uni-app只支持vue單文件組件（.vue 組件）。其他的諸如：動態組件，自定義 render，和<script type="text/x-template"> 字符串模版等，在非H5端不支持。
easycom 的使用
傳統vue組件，需要安裝、引用、註冊，三個步驟後才能使用組件。easycom將其精簡爲一步。 只要組件安裝在項目的components目錄下，並符合components/組件名稱/組件名稱.vue目錄結構。就可以不用引用、註冊，直接在頁面中使用。（HBuilderX 2.5.5起支持easycom組件模式）
1、在uni-app插件市場下載符合components/組件名稱/組件名稱.vue目錄結構的組件，自己寫的也可以哦 （ 我下載的這個）
2、在page.json中自定義easycom配置：
"easycom": {
"autoscan": true,
"custom": {
"uni-(.*)": "@/components/uni-$1/uni-$1.vue" //路徑（正則表達式）
}
}
3、在頁面中直接寫
<template>
<view class="container">
<uni-list>
<uni-list-item title="第一行"></uni-list-item>
<uni-list-item title="第二行"></uni-list-item>
</uni-list>
</view>
</template>
<script>
// 這裏不用import引入，也不需要在components內註冊uni-list組件。template裏就可以直接用
export default {
data() {
return {
}
}
}
</script>
結果：
uni-app內置基礎組件
uni內置了小程序的所有組件，需要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，需要寫成 @change="eventName" 哦
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="picker">
當前選擇: {{date}}
</view>
</picker>
全局組件
需在 main.js 裏進行全局註冊，註冊後就可在所有頁面裏使用該組件。
import Vue from 'vue'
import App from './App'
import uniList from './components/uni-list/uni-list.vue'
import uniListItem from './components/uni-list-item/uni-list-item.vue'
Vue.component('uni-list',uniList)
Vue.component('uni-list-item',uniListItem)
index.vue （所有頁面）裏可直接使用組件
<template>
<view>
<uni-list>
<uni-list-item title="111"></uni-list-item>
<uni-list-item title="222"></uni-list-item>
<uni-list-item title="333"></uni-list-item>
</uni-list>
</view>
</template>
結果：
注意：
Vue.component的第一個參數必須是靜態的字符串。nvue頁面暫不支持全局組件- 在
uni-app中的關鍵字，不可作爲組件名 （詳見）。
父子組件傳值
1、父組件向子組件傳遞數據( props )
子組件：
<template>
<view>
//在子類標籤寫上引用
<view class="content" :style="[{background:pageList}]"></view>
</view>
</template>
<script>
export default {
//在子類props裏定義接收參數
props:{
pageList:{ //參數名
type:String, //參數類型
default:'#999' //參數默認
}
},
}
</script>
<style lang="scss">
.content{
width: 400upx;
height: 400upx;
}
</style>
父組件：
<template>
<view class="phone">
//然後在父類寫上準備傳遞的參數
<uni-coms :pageList="noticesList"></uni-coms>
</view>
</template>
<script>
import uniComs from '../../components/uni-coms/uni-coms.vue'
export default {
components:{
uniComs
},
data(){
return{
noticesList: "#f00"
}
}
}
</script>
這樣子組件拿到父組件的背景顏色,就會去覆蓋默認的背景顏色，就變成了紅色
2、子組件向父組件傳遞數據( emit )
子組件：
<template>
<view>
//在子類寫上觸發事件
<view class="content" :style="[{background:pageList}]"></view>
<button type="primary" @click="passValue">點擊傳值</button>
</view>
</template>
<script>
export default {
//需要首先在子類組件定義事件
methods:{
passValue(){ //方法名 //值
this.$emit("returnDate","111")
}
}
}
</script>
//然後點擊子類觸發,就可以傳值給父類
父組件：
<template>
<view class="phone">
//在父類引用標籤上寫上在子類$emit裏面定義的方法名,以及接收方法
<uni-coms @returnDate=returnDate :pageList="returnDate"></uni-coms>
</view>
</template>
<script>
import uniComs from '../../components/uni-coms/uni-coms.vue'
export default {
components:{
uniComs
},
methods:{ //接收方法
returnDate(val){
console.log("接收的值："+val)
}
}
}
</script>
點擊傳值：
3、子組件與父組件數據同步( .sync )
子組件：
<template>
<view class="container" style="background: #0062CC;">
<button @tap="childClick" >點擊我 </button>
<view class="child"> hi {{showModal}}</view>
<view>psync同步(child):{{syncDate}}</view>
</view>
</template>
<script>
export default {
props: {
showModal: {
type: String,
default: 'hello'
},
syncDate: {
type: String,
default: 'hello'
}
},
data() {
return {
childdata:'child value'
};
},
methods:{
childClick(){
console.info(this.childdata);
this.$emit("changes",this.childdata);
}
}
}
</script>
父組件：
<template>
<view class="phone">
<uni-coms :syncDate.sync='syncDate' :showModal="showModal" @changes="childClick"></uni-coms>
<view class="parent" style="background: #09BB07;">
<view>emit傳值:{{parentValue}}</view>
<input v-model="syncDate" style="background: #808080;" />
<view>psync同步(parent):{{syncDate}}</view>
</view>
</view>
</template>
<script>
import uniComs from '../../components/uni-coms/uni-coms.vue'
export default {
components:{
uniComs
},
data(){
return {
showModal: " parent say",
parentValue: '',
syncDate: 'syncDate'
}
},
methods:{
childClick(e) {
console.info(e);
this.parentValue = e;
}
}
}
</script>
結果：
