组件的创建以及组件间通信 uni-ui组件库的使用

组件的创建

• 分两步：
  1. 创建组件

  在项目文件夹下面创建一个components文件夹后右键创建组件文件
  

  2. 注册组件

  在要使用组件的页面进行import导入和脚本模块里面进行注册

<script>
	import test from '../../components/test.vue' //导入组件
	import testA from '../../components/a.vue' //导入组件
	import testB from '../../components/b.vue' //导入组件
	export default {
		components:{
			test ,//注册test组件
			"test-a":testA,
			"test-b":testB
		}
	}
</script>

组件之间的通信

父组件给子组件传值

• 通过props来接受外界传递到组件内部的值
• 父组件(index.vue)

<template>
	<view>
		<test v-if="flag" :title="title"></test>
	</view>
</template>

<script>
	import test from '../../components/test.vue' //导入组件
	export default {
		data() {
			return {
				title: 'Hello',
			}
		},
	}
</script>

• 子组件(test.vue)

<template>
	<view>
		这是父组件传递的参数{{title}}
	</view>
</template>

<script>
	export default {
		props:['title'],//接收父组件传过来的数据
	}
</script>

<style>

</style>

子组件给父组件传值

• 触发全局的自定义事件，附加参数都会传给监听器回调函数。全局触发参考
• 监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。全局监听参考
• 子组件(test.vue):通过按钮出发全局的自定义事件myEven

<template>
	<view>
		<button @click="sendNumber" >给父组件传值</button>
	</view>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				num: 3,
			};
		},
		
		methods:{
			sendNumber(){
				console.log("给父组件传值")
				this.$emit('myEven',this.num) //按下父组件就可以触发myEven事件，myEven事件定义在父组件
			}
		},
	}
</script>

<style>

</style>

• 父组件(index.vue)：通过myEven事件来调用getNum来调取数据

<template>
	<view>
		<test v-if="flag" :title="title" @myEven="getNum"></test>
		这是子组件传递过来的数据{{num}}
	</view>
</template>

<script>
	import test from '../../components/test.vue' //导入组件
	export default {
		data() {
			return {
				num:0,
			}
		},
		methods:{
			getNum(num){
				console.log(num)
				this.num = num
			},
		},
		components:{
			test ,//注册test组件
		}
	}
</script>

<style>
</style>

兄弟组件之间的通信

• 定义两个兄弟组件
• a.vue

<template>
	<view>
		这是a组件<button type="primary" @click="addNum">修改b组件的数据</button>
	</view>
</template>

<script>
	export default {
		name:"a",
		data() {
			return {
				
			};
		},
		methods:{
			addNum(){
				uni.$emit('upDateNum',10)
			}
		}
	}
</script>

• b.vue

<template>
	<view>
		这是b组件的数组：{{num}}
	</view>
</template>

<script>
	export default {
		name:"b",
		data() {
			return {
				num:0
			};
		},
		created() {
			uni.$on('upDateNum',num=>{
				this.num += num
			})
		}
	}
</script>

• index.vue来测试a组件和b组件的通信

<template>
	<view>
		<test-a></test-a>
		<test-b></test-b>
	</view>
</template>

<script>
	import testA from '../../components/a.vue' //导入组件
	import testB from '../../components/b.vue' //导入组件
	export default {
		components:{
			"test-a":testA,
			"test-b":testB
		}
	}
</script>

uni-ui的使用

• 通过官网扩展组件库导入HbuilderX 组件库

• 下载导入后按照组件使用说明操作

• 以日历为例

在这里插入代码片