uniapp 组件

组件基础部分

组件是什么？

组件是视图层的基本组成单元。它是一个单独且可复用的功能模块的封装。

组件的组成

以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

注意：所有组件与属性名都是小写，单词之间以连字符-连接。

<component-name property1=”value” property2=”value”>
content
</component-name>

组件的公共属性

除了上述公共属性，还有一类特殊属性以v-开头，称之为vue指令，如v-if、v-else、v-for、v-model。详见vue指令

组件的事件

以@为前缀，指向在script的methods里定义过的js方法，还可以给方法传参数。

<template>
	<view>
		<button size="mini" @click="goto('/pages/about/about')">按钮</button>
	</view>
</template>
<script>
    export default {
        methods: {
            goto(url) {
                console.log("按钮被点击了，且传入的参数是：" + url)
            }
        }
    }
</script>

//click是button组件的点击事件，在用户点击这个button时触发

Vue2组件部分

定义规范：

• 根节点为 <template>，这个 <template> 下只能且必须有一个根 <view> 组件。
• 一个组件的 data 选项必须是一个函数。

组件注册方式

1、全局注册

1.main.js 里进行全局导入和注册

import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)

2.index.vue 里可直接使用组件

<template>
		<view>
			<page-head></page-head>
		</view>
</template>

2、局部注册

1.传统vue规范

	<!-- 在index.vue引入 uni-badge 组件-->
	<template>
		<view>
			<uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
		</view>
	</template>
	<script>
                //1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
		import uniBadge from '@/components/uni-badge/uni-badge.vue';
		export default {
                //2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
			components:{uniBadge }
		}
	</script>

单项数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

自定义事件

.native 修饰符

.sync 修饰符