一、uni-app中组件的创建

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

1.步骤

1)创建login组件

在component中创建login目录，然后新建login.vue文件

<template>
	<view>
		这是一个自定义组件
	</view>
</template>

<script>
</script>

<style>
</style>

2)在其他组件中导入该组件并注册

import login from "@/components/test/test.vue"

3)注册组件

components: {test}

4)使用组件

<test></test>

2.组件的生命周期函数

与vue的生命周期比较一下

beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用`$nextTick`Vue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

二、组件的通讯

1.父组件给子组件传值

通过props来接受外界传递到组件内部的值

<template>
	<view>
		这是一个自定义组件 {{msg}}
	</view>
</template>

<script>
	export default {
		props: ['msg']
	}
</script>

<style>
</style>

其他组件在使用login组件的时候传递值

<template>
	<view>
		<test :msg="msg"></test>
	</view>
</template>

<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		
		components: {test}
	}
</script>

2.子组件给父组件传值

通过**$emit触发事件**进行传递参数

<template>
	<view>
		这是一个自定义组件 {{msg}}
		<button type="primary" @click="sendMsg">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: '打篮球'
			}
		},
		props: {
			msg: {
				type: String,
				value: ''
			}
		},
		methods: {
			sendMsg () {
				this.$emit('myEvent',this.status)
			}
		}
	}
</script>

父组件定义自定义事件并接收参数

<template>
	<view>
		<test :msg="msg" @myEvent="getMsg"></test>
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		methods: {
			getMsg (res) {
				console.log(res)
			}
		},
		
		components: {test}
	}
</script>

3.兄弟组件通讯

（1）创建组件a，b，引入index.vue, components注册

// index .vue  页面展示组件内容
<script>
    import test from '../../components/test.vue'
    import testA from '@/components/a.vue'
    import testB from '@/components/b.vue'
    export default {
        components:{
            test,
            "test-a":testA,
            "test-b":testB,
        },
    }
</script>
<template>
    <view class="content">
        <test-a></test-a>
        <test-b></test-b>
    </view>
</template>

（2）通过uni.$on注册一个全局监听事件，通过uni.$emit触发全局监听事件

//a组件 a.vue
<template>
    <view><button @click="addNum">修改b组件数据</button></view>
</template>

<script>
    export default {
        methods:{
            addNum(){
                uni.$emit('changeNum',10) //触发全局变量自定义事件changeNum，该函数为b组件内修改b组件内容的方法  
　　　　　　　　} 
　　　　　　} 
　　} 
</script>

//b组件 b.vue  a组件更改该组件内容
<template>
    <view>
        数据{{num}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                num:0,
            };
        },
        created(){ //创建全局监听自定义事件  改变内容
            uni.$on('changeNum',num=>{
                this.num+=num
            })
        },
    }
</script>

三、uni-ui的使用

uni-ui文档

1、进入Grid宫格组件

2、使用HBuilderX导入该组件

3、导入该组件

import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"

4、注册组件

components: {uniGrid,uniGridItem}

5、使用组件

<uni-grid :column="3">
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
</uni-grid>

占坑：uni-app基础知识学习
【1】全局配置和页面配置
 【2】组件的基本使用+样式
 【3】数据绑定+事件+生命周期
 【4】下拉刷新+上拉加载+网络请求
 【5】上传图片、预览图片+跨域兼容+导航跳转
 【6】组件的创建+组件通讯+uni-ui使用

uni-app基础知识学习【6】组件的创建+组件通讯+uni-ui使用