目录
一.组件简介
- 组件是一个单独且可复用的功能模块的封装。
组件是视图层的基本组成单元。
每个组件,包括如下几个部分:以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。
- 组件名称由尖括号包裹,称为标签,它有开始标签和结束标签。结束标签的
<
后面用/
来表示结束。结束标签也称为闭合标签。如下面示例的<component-name>
是开始标签,</component-name>
是结束标签。 - 在开始标签和结束标签之间,称为组件内容。如下面示例的
content
- 开始标签上可以写属性,属性可以有多个,多个属性之间用空格分割。如下面示例的
property1
和property2
。注意闭合标签上不能写属性。 - 每个属性通过
=
赋值。如下面的示例中,属性property1
的值被设为字符串value
。
二.组件注册及引用
1.组件注册
- 新建compoents文件夹用于存放组件文件
- 在compoents文件夹中新建组件element
element.vue
<template>
<view>
<view v-text="title"></view>
</view>
</template>
<script>
export default {
data() {
return {
title:"Hello!"
};
}
}
</script>
<style>
</style>
2.组件引用
- 导入组件文件:import element from '../../components/element.vue'
- 在components里面进行注册
- 在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>