新建组件的方式，在components目录下新建组件，然后就能在pages页面当中直接使用该组件
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>
页面效果如下：
props的作用就是可以从外部的标签当中传值到标签当中的内容
props的使用方法：在子组件当中，props是一个对象，对象当中的数据也是一个对象，该有两个属性，type是数据的类型，default是数据的默认值，当父组件没有传值时使用默认值。在vue.js当中props是一个数组，并且里面的数据是字符串类型
在test.vue组件当中
<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页面当中
<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>
页面效果：
在属性的值前面加一个：代表着引用变量的值
对组件绑定事件：
<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>
动态设置style属性：
<view class="nr" v-for="(item,index) in classification" :key="index" :style="'color:'+item.color">
子组件传父组件：主要通过this.$emit(event,message)
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数message传递给父组件，父组件通过@event监听并接收参数。
子组件：文章来源：https://www.toymoban.com/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);
}
父组件：文章来源地址https://www.toymoban.com/news/detail-606023.html
<fenlei @fenleiEvent='show'></fenlei>
show(e){
console.log('父组件接收:')
console.log(e);
}
到了这里，关于uniapp框架组件、props对组件传值、对组件绑定事件的使用、子组件给父组件传值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
