uni-app组件的使用及父子组件传值

uni-app搭建了组件的插件市场，可大幅提升开发者的效率。https://ext.dcloud.net.cn/

组件的使用

在项目的/component目录下存放组件，在要显示组件的页面中则分为3步：导入、注册和使用。

<template>
	<view class="content">
	<test></test>//三、使用组件（也可以写为</test>）
	</view>
</template>
<script>
	import test from "../../components/test.vue"//二、导入组件
	export default {
		data() {
			return { 
			}
		},
		components:{	//一、局部注册组件
			test
		}
	}
</script>
<style>
</style>

uni-app只支持（.vue 组件）。其他的诸如：动态组件，自定义 render，和<script type="text/x-template"> 字符串模版等，在非H5端不支持。

easycom【组件自动引入规则】（HBuilderX 2.5.5起支持easycom组件模式。）

1、传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。
2、可在（插件市场）下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。
3、easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置，
例：

<template>
    <view class="container">
        <uni-list>
            <uni-list-item title="第一行"></uni-list-item>
            <uni-list-item title="第二行"></uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {
            }
        }
    }
</script>

效果：（该组件的下载地址：https://ext.dcloud.net.cn/plugin?id=24）

自定义easycom配置的示例：

"easycom": {
  "autoscan": true,//autoscan是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
  "custom": {
  }
}

注意：

• easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用
• easycom方式引入组件不是全局引入，而是局部引入。
• 在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
• 考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
• easycom只处理vue组件，不处理小程序组件。暂不处理后缀为.nvue的组件
• nvue页面里的.vue后缀的组件，同样支持easycom

uni-app内置基础组件

uni-app 内置了小程序的所有组件
注意：原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

全局组件（nvue页面暂不支持全局组件）

uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。
例：
main.js 里进行全局导入和注册

import uniList from './components/uni-list/uni-list.vue'
Vue.component('uni-list',uniList)//Vue.component 的第一个参数必须是静态的字符串

其他vue文件里可直接使用组件

<template>
  <view>
    <uni-list></uni-list>
    </view>
</template>

点击查看不能作为组件名的字符串

父子组件传值

子类接收父类的数据,就会用到props

在子类props里定义接收参数:

父组件：

<template>
	<view class="phone">
		<test :backGround="noticesList"></test>//传给子
	</view>
</template>
<script>
import test from '../../components/test.vue'
export default {
	components:{
		test
	},
	data(){
		return{
			noticesList: "#000"   //传递的参数
		}
	}	
}
</script>

子组件

<template>
	<view>
		<view class="con" :style="[{background:backGround}]"></view>
	</view>
</template>
<script>
export default {
  //子类的props定义接收参数
	props:{
		 backGround:{            //参数名
			 type:String,      //定义传值的类型
			 default:'#f00'    //参数默认
		 }
	 }
}
</script>
<style>
.con{
		width: 200rpx;
		height: 200rpx;
	}
</style>

实现效果：

在子类props里定义接收参数：

在子类标签写上引用：

然后在父类写上准备传递的参数：

这样 子组件拿到父组件的背景颜色值,就会去覆盖默认的背景颜色

子组件给父组件传值（$emit）

父组件：

<template>
	<view class="phone">
		<!-- 在父类引用标签上写上在子类$emit里面定义的方法名,以及接收方法 -->
		<test  @returnDat='returnDate'></test>
	</view>
</template>

<script>
import test from '../../components/test.vue'
export default {
	components:{
		test
	},
	methods:{ //定义接收方法
		returnDate(val){
			console.log("接收的值："+val)
		}
	}
}
</script>

子组件：

<template>
	<view>
	<!-- 	//在子类写上触发事件 (当点击时传值给父)-->
		<button type="primary" @click="getValue">点击传值</button>
	</view>
</template>

<script>
export default {
	//需要首先在子类组件定义事件
	methods:{
		getValue(){      
			this.$emit("returnDat","liyan")//传递的值
			 //returnDate接收的方法名  
		}  
	}
}
</script>

1、需要在子类组件定义事件

2、在子类写上触发事件

3、在父类引用标签上写上在子类$emit里面定义的方法名,以及接收方法
然后点击子类触发,就可以传值给父类：（可多次）