uniapp框架组件、props对组件传值、对组件绑定事件的使用、子组件给父组件传值

新建组件的方式，在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监听并接收参数。

子组件：

<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);
	
}

父组件：

<fenlei @fenleiEvent='show'></fenlei>

show(e){
	console.log('父组件接收:')
		console.log(e);
	}