5 | uniapp之组件的使用

1. 组件的简单使用

（1）定义组件

• 在项目的根目录下新建一个文件夹components用来存放组件
• 在components目录下直接新建组件 *.vue

注意： 使用脚手架开发时，要在src目录下文件夹components

（2）引入组件

在页面中引入组件 import 组件名 from ‘组件路径’

（3）注册组件

• 在页面的实例中，新增属性components
• 属性components是一个对象，把组件放进去注册

（4）使用组件

在页面的标签中。直接使用引入的组件 “<组件></组件>

（5）代码示例

imgBorder.vue

<template>
	<view>
		<image src="https://s1.ax1x.com/2020/08/09/aT00YQ.th.jpg"></image>
	</view>
</template>

<script>
	export default {
	}
</script>

<style>

</style>

page.vue

<template>
	<view>
		你点我试试
		<img-border></img-border>
	</view>
</template>

<script>
	import imgBorder from '@/components/img-border.vue'
	export default {
		components: {
			imgBorder
		}
	}
</script>

<style lang="scss">
</style>

2. 父页面向子组件传递参数

（1）使用步骤

• 父页面向子组件传递参数，通过属性的方式
• 子组件通过props进行接收数据

（2）代码示例

imgBorder.vue

<template>
	<view>
		<image :src="src"></image>
	</view>
</template>

<script>
	export default {
		props:{
			src:String
		}
	}
</script>

<style>

</style>

page.vue

<template>
	<view>
		<!-- 使用冒号：代表传递过来的值是一个变量，不是字符串 -->
		<img-border :src="src1"></img-border>
		<img-border :src="src2"></img-border>
	</view>
</template>

<script>
	import imgBorder from '@/components/img-border.vue'
	export default {
		data() {
			return {
				src1: "https://s1.ax1x.com/2020/08/09/aT00YQ.th.jpg",
				src2: "https://s1.ax1x.com/2020/08/16/dVCN4O.th.jpg"
			}
		},
		components: {
			imgBorder
		}
	}
</script>

<style lang="scss">
</style>

3. 子组件向父页面传递参数

（1）使用步骤

• 子组件通过触发事件的方式向父页面传递参数
• 父组件通过监听事件的方式来接收数据

（2）代码示例

imgBorder.vue

<template>
	<view>
		<image @click="handleImg" :src="src"></image>
	</view>
</template>

<script>
	export default {
		props: {
			src: String
		},
		methods: {
			handleImg() {
				this.$emit("srcChange", this.src);
			}
		}
	}
</script>

<style>

</style>

page.vue

<template>
	<view>
		<view>子组件传递过来的路径{{src}}</view>
		<!-- 使用冒号：代表传递过来的值是一个变量，不是字符串 -->
		<img-border @srcChange="handleSrcChange" :src="src1"></img-border>
		<img-border @srcChange="handleSrcChange" :src="src2"></img-border>
	</view>
</template>

<script>
	import imgBorder from '@/components/img-border.vue'
	export default {
		data() {
			return {
				src: "",
				src1: "https://s1.ax1x.com/2020/08/09/aT00YQ.th.jpg",
				src2: "https://s1.ax1x.com/2020/08/16/dVCN4O.th.jpg"
			}
		},
		components: {
			imgBorder
		},
		methods: {
			handleSrcChange(e) {
				this.src = e
			}
		}
	}
</script>

<style lang="scss">
</style>

4. 全局共享数据

（1）应用场景

项目开发中有很多父传子、子传父的情况下，可以使用全局共享数据

（2）四种方法

• 通过Vue的原型共享数据
• 通过globalData共享数据
• vuex （后期再深入学习）
• 本地存储（后期再深入学习）

（3）代码示例

1、通过Vue的原型共享数据

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 定义全局数据，通过vue的原型来实现
Vue.propertype.baseurl = "www.baidu.com";

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

2、通过globalData共享数据

App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		globalData:{
			base:"www.baidu123.com"
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

page.vue

onLoad() {
			console.log(this.baseurl);
			// 获取globaldata
			console.log(getApp().globalData.base);
		}

5. 插槽slot

（1）作用

标签其实也是数据中的一种，想实现动态的给子组件传递标签，就可以使用插槽slot，通过slot来实现占位符

（2）代码示例

img-border.vue

<template>
	<view>
		<view>标题</view>
		<view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {

	}
</script>

<style>

</style>

page.vue

<template>
	<view>
		<img-border>
			<view>
				<h1>内容</h1>
				<radio></radio>
			</view>
		</img-border>
	</view>
</template>

<script>
	import imgBorder from '@/components/img-border.vue'
	export default {
		components:{
			imgBorder
		}
	}
</script>

<style lang="scss">
</style>