uni-app 新手入门到精通3

骑猪看日落 2021-09-02 10:03 303阅读 0赞

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

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

> uni-app 新手入门到精通完结 [https://blog.csdn.net/renxiaoxing55/article/details/109117750][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下有新的文件生成)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]

<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>

## 第四篇接下篇文章了 ##

[https_blog.csdn.net_renxiaoxing55_article_details_109073564]: https://blog.csdn.net/renxiaoxing55/article/details/109073564
[https_blog.csdn.net_renxiaoxing55_article_details_109079171]: https://blog.csdn.net/renxiaoxing55/article/details/109079171
[https_blog.csdn.net_renxiaoxing55_article_details_109117750]: https://blog.csdn.net/renxiaoxing55/article/details/109117750
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/2e8c633a6050450fa11d66a2fb55f25f.png