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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值