uni-app(五) 组件，自定义组件

1.组件的简单使用

1.组件的定义

在src下新建文件夹components 用来存放组件

在components下之间新建自定义组件 ".vue"

 

2.组件的引入

script标签下引入组件路径

xx为组件名

import xx from "@componets/xx";

3.组件的注册

export default 标签下注册组件

components: {
	xx
}

4.组件的使用

<template>
	<view class="content">
	<!-- 4.使用组件 -->
	<xx></xx>
	</view>
</template>

 

2.组件传参

1.父传子，通过属性方式

子组件通过 props 接收数据

2.子传父，通过触发事件方式

子组件 触发事件 方式传给父

父组件 监听  方式接收

3.全局数据共享

通过vue原型共享数据

（即在main.js中定义数据

Vue.prototype.xx="xxx";

）

通过globalData共享数据

（即在App.vue中定义全局数据

通过

getApp().gelobalData.xx="xxx"

 获取数据

）

3.组件插槽

使用 slot 占位符将 组件标签 作为数据传递过去