新建組件的方式，在components目錄下新建組件，然后就能在pages頁(yè)面當(dāng)中直接使用該組件
test.vue
<template>
<view>
test
</view>
</template>
<script>
export default {
name:"test",
data() {
return {
};
}
}
</script>
<style lang="scss">
</style>
home.vue:
<template>
<view>
<uni-icons type="search" size="17"></uni-icons>
<test></test>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
}
}
</script>
<style lang="scss">
</style>
頁(yè)面效果如下：
props的作用就是可以從外部的標(biāo)簽當(dāng)中傳值到標(biāo)簽當(dāng)中的內(nèi)容
props的使用方法：在子組件當(dāng)中，props是一個(gè)對(duì)象，對(duì)象當(dāng)中的數(shù)據(jù)也是一個(gè)對(duì)象，該有兩個(gè)屬性，type是數(shù)據(jù)的類型，default是數(shù)據(jù)的默認(rèn)值，當(dāng)父組件沒有傳值時(shí)使用默認(rèn)值。在vue.js當(dāng)中props是一個(gè)數(shù)組，并且里面的數(shù)據(jù)是字符串類型
在test.vue組件當(dāng)中
<template>
<view :style="{'color':yanse}">
{{msg}}
</view>
</template>
<script>
export default {
props:{
yanse:{
type:String,
default:'red'
}
},
name:"test",
data() {
return {
msg:'test'
};
},
}
</script>
<style lang="scss">
</style>
在home.vue頁(yè)面當(dāng)中
<template>
<view>
<uni-icons type="search" size="17"></uni-icons>
<test :yanse="'yellow'"></test>
{{msg}}
</view>
</template>
<script>
export default {
data() {
return {
msg:'hello'
};
},
methods:{
}
}
</script>
<style lang="scss">
</style>
頁(yè)面效果：
在屬性的值前面加一個(gè)：代表著引用變量的值
對(duì)組件綁定事件：
<template>
<view :style="{'color':yanse}" @click="test">
{{msg}}
</view>
</template>
<script>
export default {
props:{
yanse:{
type:String,
default:'red'
}
},
name:"test",
data() {
return {
msg:'test'
};
},
methods:{
test:function(){
console.log('test');
}
}
}
</script>
<style lang="scss">
</style>
動(dòng)態(tài)設(shè)置style屬性：
<view class="nr" v-for="(item,index) in classification" :key="index" :style="'color:'+item.color">
子組件傳父組件：主要通過this.$emit(event,message)
$emit 綁定一個(gè)自定義事件event，當(dāng)這個(gè)這個(gè)語句被執(zhí)行到的時(shí)候，就會(huì)將參數(shù)message傳遞給父組件，父組件通過@event監(jiān)聽并接收參數(shù)。
子組件：文章來源：http://www.zghlxwxcb.cn/news/detail-606023.html
<view v-for="(item,index) in fenlei" :key='index' v-on:click="dianji(index)">
<view class="text" :style="'color:'+item.color">
{{item.text}}
</view>
</view>
dianji:function(e){
var that = this;
console.log(e);
this.$emit('fenleiEvent',e);
}
父組件：文章來源地址http://www.zghlxwxcb.cn/news/detail-606023.html
<fenlei @fenleiEvent='show'></fenlei>
show(e){
console.log('父組件接收:')
console.log(e);
}
到了這里，關(guān)于uniapp框架組件、props對(duì)組件傳值、對(duì)組件綁定事件的使用、子組件給父組件傳值的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
