uni-app 新手入门到精通3

uni-app 新手入门到精通1 https://blog.csdn.net/renxiaoxing55/article/details/109073564

uni-app 新手入门到精通2 https://blog.csdn.net/renxiaoxing55/article/details/109079171

uni-app 新手入门到精通完结 https://blog.csdn.net/renxiaoxing55/article/details/109117750

1, 组件的创建使用和组件的生命周期

引入组件=>注册组件=>使用组件

<template>
	<view>
		<test></test>
	</view>
</template>
import test from '../../components/test.vue'
export default {
		components: {
			test:test,
		},
}

组件生命周期,我就说说常用的几个吧(组件中触发的)

created  在实例创建完成后被立即调用   通俗点就是页面渲染完成之后触发的
beforeMount 还没有渲染到页面上去   mounted已经渲染上去了,以后想操作dom直接在mounted进行操作
不明白的,看组件的内容打印结果就可以了

<template>
	<view id="myView">
		这是test组件{{num}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 3,
			};
		},
		beforeMount () {
			 console.log('beforemount',document.getElementById('myView'))
		},
		mounted() {
			 console.log('mounted',document.getElementById('myView'))
		},
	}
</script>

2,组件之间的通讯方式

父传子

父组件
<template>
	<view>
		<test :title="title"></test>
	</view>
</template>
<script>
	import test from '../../components/test.vue'
	export default {
		components: {
			test:test,  //注册组件
		},
		data() {
			return {
				title:"hello"
			}
		},
	}
</script>

子组件
<template>
	<view>
		<view>这是父组件传递过来{{title}}</view>
	</view>
</template>
<script>
	export default {
		props: ['title'],
	}
</script>

子传父 通过$emit来触发自定义的事件

子组件
<template>
	<view id="myView">
		<button @click="send">给父组件传值</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				num: 3,
			};
		},
		props: ['title'],
		methods: {
			send(){
				this.$emit("rereceive",this.num) 
			}
		},
	}
</script>

父组件
<template>
	<view>
		<test :title="title" @rereceive="getnum"></test>
		<view>这是子组件传递过来的数据{{num}}</view>
	</view>
</template>
<script>
	import test from '../../components/test.vue'
	export default {
		components: {
			test:test,
		},
		data() {
			return {
				num:0
			}
		},
		methods: {
			getnum(num){
				this.num = num
			},
	}
</script>

兄弟组件传值
this.$on 注册一个全局事件   this.$emit触发全局事件

A组件
<template>
	<view>
		这是a组件：<button @click="addNum">修改b组件的数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			addNum () {
				uni.$emit('updateNum',10)
			}
		}
	}
</script>

B组件
<template>
	<view>
		这是b组件的数据:{{num}}
	</view>
</template>
<script>
	export default {
		data() {
			return {
				num: 0
			};
		},
		created(){
			uni.$on('updateNum',num=>{
				this.num+=num
			})
		}
	}
</script>

父组件
<template>
	<view>
		<test-a></test-a>
		<test-b></test-b>
	</view>
</template>
<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>
<style>
</style>

3,uni-ui 组件库组件库的基本介绍和使用
一些默认提供的组件 不能够完善项目的开发 (位置 组件=>扩展组件)

点击  使用HBuilderX导入插件=>打开HBuilderX(我们会发现在componts下有新的文件生成)

<template>
	<view>
		<uni-calendar
			:insert="true"
			:lunar="true" 
			:start-date="'2019-3-2'"
			:end-date="'2019-5-20'"
			@change="change"
			 >
		</uni-calendar>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		components: {
			uniCalendar
		},
		methods: {
			change(e){
				console.log("组件被触发了",e)
			},
	}
</script>

第四篇接下篇文章了