uni-app基本组件

uni-app自定义组件

• 自定义组件需遵从easycom规范（创建components/组件名称/组件名称.vue），就可以直接使用
• 当自定义父子组件需要传递数据时，父组件向子组件传递需要通过props对象方法（需要在子组件里通过props对象自定义属性）
• 示例：

//子组件
//1.首先创建自定义组件
//2.在script标签内设定props对象方法，并在props里嵌套自定义对象
props:{
//对象1
			color:{
				type:String,   //类型为字符串
				default:'while'   //默认属性值
			},
  //对象2
			size:{
				type:String,   //类型为字符串
				default:'70px'   //默认属性值
			}
		},
//3. 子组件内调用对象方法
<template>
	<view>
                //background和fontSize是uni-app的属性，不是自定义，值是调用的对象方法
		<view :style="{background:color,fontSize:size}">
			11111111
		</view>
	</view>
</template>

//4.父组件调用子组件对象方法
<template>
	<view>
		<card color="red"></card>
		<card color="blue" size="14px"></card>
		<card ></card>
	</view>
</template>

• 子组件向父组件传递数据可以通过自定义事件，父组件自定义事件，子组件触发父组件定义的事件（this.$emit('父组件的自定义事件')），并传递数据
• 示例：

//1.父组件里自定义事件，并给子组件标签设置事件
<script>
	export default {
	 //通过在methods里自定义事件方法
		methods: {
			fclick(){
				console.log('我是父级 );
			}
		}
	}
</script>

<template>
	<view>
    //父组件里的子组件标签设置事件
		<card @fclick="fclick"></card>
	</view>
</template>

//2.子组件里自定义事件
<script>
	export default {
		name:"card",
		methods: {
        //
			cardclick (){
            //通过此方法子组件自定义事件可以和父组件自定义事件绑定
				this.$emit('fclick');
			}
		}
	}
</script>

<template>
	<view>
    //子组件里调用自定义事件，来触发父组件的自定义事件
		<view @click="cardclick">
			11111111
		</view>
	</view>
</template>

• 子组件可以定义插槽，让父组件自定义要显示的内容，不用在子组件定义显示的内容
• 示例：

//没有定义插槽，父组件无论如何更改内容，显示的还是子组件定义的内容
<template>
	<view>
		<view :style="{background:color,fontSize:size}" @click="cardclick">
			111
		</view>
	</view>
</template>

//定义插槽后，子组件不用定义内容，父组件可以自定义内容
<template>
	<view>
		<view :style="{background:color,fontSize:size}" @click="cardclick">
			<slot></slot>
		</view>
	</view>
</template>