uni-app学习--自定义组件

Vue.js的核心思想是数据驱动视图和组件化，组件是Vue非常重要的功能模块，其作用是拆分代码、代码复用等。简单概括，组件是一个单独且可复用的功能模块的封装。

本章结合官方组件使用说明使用说明进行概括。

使用组件的优势：

• 可以将组件进行任意次数的复用。
• 合理的划分组件，有助于提高应用性能。
• 代码更加方便组织和管理，并且扩展性也更强，便于多人协同开发。
• 组件化开发能大幅度提高应用开发效率、测试性、复用性等。

在uni-app工程根目录下的 components 目录，创建并存放自定义组件：

│─components            	符合vue组件规范的uni-app组件目录
│  └─componentA         	符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件
│  		└─componentA.vue    可复用的componentA组件
│  └─component-a.vue      可复用的component-a组件

一、组件的创建

        1.全局注册

        uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。nvue 页面暂不支持全局组件。

	// 1、main.js 里进行全局导入和注册
    import Vue from 'vue'
	import pageHead from './components/page-head.vue'
	Vue.component('page-head',pageHead)  //Vue.component 的第一个参数必须是静态的字符串。

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

    

        2.局部注册

        局部注册之前，在需要引用该组件的页面，导入你想使用的组件。推荐使用 easycom 方式引入。

 

        方式1——传统vue规范： 在 index.vue 页面中，通过 import 方式引入组件 ，在 components 选项中定义你想要使用的组件。

         方式2——通过uni-app的 easycom 。将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。组件就可以不用引用、注册，直接在页面中使用。easycom是自动开启的，不需要手动开启，有需求时可以在 pages.json 的 easycom 节点进行个性化设置。

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

uni-app 搭建了组件的插件市场，有很多现成的组件，若下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。uni-app插件市场

二、组件之间的数据传递

•  父传子

   props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

        1、当props为对象时

选项	类型	说明
type	String 、 Number 、 Boolean 、 Array 、 Object 、 Date 、 Function 、 Symbol ，任何自定义构造函数、或上述内容组成的数组	会检查一个 prop 是否是给定的类型，否则抛出警告
default	any	为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required	Boolean	定义该 prop 是否是必填项
validator	Function	自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 false 的值 (也就是验证失败)，一个控制台警告将会被抛出

         

        2、当props为数组时

               ①传递静态Prop        

               ②传递动态Prop

 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

•  子传父

子组件自定义事件通过$emit向父组件传参

•   将原生事件绑定到自定义组件

        ①在一个组件的根元素上直接监听一个原生事件。 这时，你可以使用 @事件的 .native 修饰符：

         ②当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。

由上方可以看出当 父向子传递变量是正常的，但是在子组件直接修改父传过来的变量会报错，不会同时响应到改变父的变量。原因是：props是单向数据流——所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

 解决方法

        第一种：子组件自定义事件通过$emit向父组件传参从而改变父级组件的传过来的值。（不做解说，参考上方子传父案例）

        第二种：.sync 修饰符