uni-app组件注册及引用

目录

一.组件简介

 二.组件注册及引用

1.组件注册

element.vue

 2.组件引用

3.效果图

---

一.组件简介

---

• 组件是一个单独且可复用的功能模块的封装。

组件是视图层的基本组成单元。

每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

• 组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。结束标签的<后面用/来表示结束。结束标签也称为闭合标签。如下面示例的<component-name>是开始标签，</component-name>是结束标签。
• 在开始标签和结束标签之间，称为组件内容。如下面示例的content
• 开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。如下面示例的property1和property2。注意闭合标签上不能写属性。
• 每个属性通过=赋值。如下面的示例中，属性property1的值被设为字符串value。

 二.组件注册及引用

---

1.组件注册

1.  新建compoents文件夹用于存放组件文件
2.  在compoents文件夹中新建组件element

element.vue

<template>
	<view>
		<view v-text="title"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"Hello!"
			};
		}
	}
</script>

<style>

</style>

 2.组件引用

1. 导入组件文件:import element from '../../components/element.vue'
2. 在components里面进行注册
3. 在template中以标签的形式使用

<template>
	<view>
		<elementname></elementname>
	</view>
</template>

<script>
	import element from '../../components/element.vue'
	export default {
		data() {
			return {

			}
		},
		components:{
			elementname : element
		},
		methods: {

		}
	}
</script>

<style>

</style>

3.效果图

---