局部组件
在uniAppDemo项目文件下创建components,在里面新建headerTab.vue组件(注意:组件的命名不能为关键字,保留字)
创建好组件后开始写组件的内容,然后在pages目录下的index.vue进行导入
使用组件时,分三个步骤:1.导入组件 2. 注册组件 3. 使用组件
注册组件由于键值都为相同的值,因此可简写为一个值
全局组件
全局组件需要在main.js下面导入组件,然后进行全局定义组件,这样,外面就可以直接使用全局组件。
外面可直接使用全局组件
父组件向子组件传值通信
父组件可以选择传变量或者常量给子组件,子组件通过使用props去接收父组件传过来的值即可。
子组件向父组件传值通信
1. 子组件通过创建一个点击事件利用this.$emit('msgSend',this.msg)向父组件发送子组件的msg的值数据
2. 父组件通过子组件自定义的msgSend方法去接收子组件传过来的值
事件车通信(兄弟组件传值通信)
兄弟组件之间的传值:
1. 首先创建一个common目录,存放bus.js文件,bus.js文件仅仅只导入Vue然后再将这个新的Vue对象暴露出去即可。
2. 在headerTab组件中创建一点击事件busSend, 然后在方法中利用bus.$emit('busSend',this.color)将颜色的值传给headerNav组件。
3. 在兄弟组件的headerNav中将用bus.$on('busSend',callback) 来接收headerTab传过来的值。
点击后的效果实现: