自定义组件

2021-04-07 本文已影响0人邹邹_ZZ

组件是视图层的基本组成单元。
组件是一个单独且可复用的功能模块的封装。
一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。内容则写在两个标签之内。
根节点为 <template>，这个 <template> 下只能且必须有一个根 <view> 组件。这是vue单文件组件规范。
一个组件的 data 选项必须是一个函数。

下面是一个基本组件示例，在根<view>组件下再次引入一个<view>组件，并给组件的text区绑定一个data。

 <template>
        <view>
            <view>{{userName}}</view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    "userName":"foo"
                }
            }
        }
    </script>

基础组件是内置在uni-app框架中的，包括view、text、input、button、video等几十个基础组件，列表详见：uni-app基础组件

但仅有基础组件是不够用的，实际开发中会有很多封装的组件。

优势

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

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

注册

在注册一个组件的时候，我们始终需要给它一个名字。定义组件名的方式有两种：

使用 kebab-case

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用 PascalCase

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。

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

全局注册

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

Vue.component 的第一个参数必须是静态的字符串。
nvue 页面暂不支持全局组件。

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>

局部注册

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

页面引入组件方式

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

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

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

在对象中放一个类似 uniBadge 的变量名其实是 uniBadge : uniBadge 的缩写，即这个变量名同时是：

用在模板中的自定义元素的名称
包含了这个组件选项的变量名(仅支持驼峰法命名)
2.通过uni-app的easycom：将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

    <!-- 在index.vue引入 uni-badge 组件-->
    <template>
        <view>
            <uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
        </view>
    </template>
    <script>
        // 这里不用import引入，也不需要在components内注册uni-badge组件。template里就可以直接用
        export default {
            data() {
                return {
                }
            }
        }
    </script>

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

uni-app只支持 vue单文件组件（.vue 组件）。其他的诸如：动态组件，自定义 render ，和 <script type="text/x-template"> 字符串模版等，在非H5端不支持。

props

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

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

示例

传递静态或动态 Prop

可以像这样给 prop 传入一个静态的值：

    <blog-post title="My journey with Vue"></blog-post>

可以通过 v-bind 动态赋值

    <!-- 动态赋予一个变量的值 -->
    <blog-post v-bind:title="post.title"></blog-post>

    <blog-post v-bind:is-published="post.isPublished"></blog-post>

传入一个对象的所有 property

如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post ：

    post: {
        id: 1,
        title: 'My Journey with Vue'
    }

    <blog-post v-bind="post"></blog-post>
    <!-- 上面的模板等价于： -->
    <blog-post
        v-bind:id="post.id"
        v-bind:title="post.title"
    ></blog-post>

单向数据流

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

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

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。

    <template>
        <view>
            <!-- 我是子组件componentA -->
            <view>{{title}}</view>
        </view>
    </template>
    <script>
        export default {
            props: ['title']
        }
    </script>

    <template>
        <view>
            <!-- 我是父组件 -->
            <componentA :title="title"></componentA>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    title:"hello"
                }
            }
        }
    </script>

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

    <template>
        <view>
            <!-- 我是子组件componentA -->
            <view>{{normalizedSize}}</view>
        </view>
    </template>

    <script>
        export default {
            props: ['size'],
            computed: {
                normalizedSize: function () {
                    return this.size.toLowerCase()
                }
            }
        }
    </script>

    <template>
        <view>
            <!-- 我是父组件 -->
            <componentA :size="size"></componentA>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    size:"M"
                }
            }
        }
    </script>

ref

被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：


//非H5端不支持通过this.$refs.content来获取view实例
<view ref="content">hello</view>

//支持通过this.$refs.child来获取child-component实例
<child-component ref="child"></child-component>

当 ref 和 v-for 一起用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明：

因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们，它们还不存在！$refs 也不是响应式的，因此你不应该用它在模板中做数据绑定。

子组件ref

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。访问子组件实例或子元素，通过 ref 为子组件赋予一个 ID 引用，在vue的js中可通过this.$refs.XXX来获取到组件对象。

    <base-input ref="usernameInput"></base-input>

你已经定义了这个 ref 的组件里，你可以使用：this.$refs.usernameInput来访问这个<base-input>实例。

示例：

//base-input子组件页面
<template>
    <view>
        <input :focus="isFocus" type="text" placeholder="请输入内容" />
    </view>
</template>
<script>
    export default {
        name:"base-input",
        data() {
            return {
                "isFocus":false
            };
        },
        methods:{
            focus(){
                this.isFocus = true
            }
        }
    }
</script>

允许父级组件通过下面的代码聚焦<base-input> 里的输入框：

//index 父组件页面
<template>
    <view>
        <base-input ref="usernameInput"></base-input>
        <button type="default" @click="getFocus">获取焦点</button> 
    </view>
</template>
<script>
    export default {
        methods:{
            getFocus(){
                //通过组件定义的ref调用focus方法
                this.$refs.usernameInput.focus()
            }
        }
    }
</script>

注意

非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）

自定义事件

.sync 修饰符

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

    <!-- 父组件 -->
    <template>
        <view>
            <syncA :title.sync="title"></syncA>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    title:"hello vue.js"
                }
            }
        }
    </script>

    <!-- 子组件 -->
    <template>
        <view>
            <view @click="changeTitle">{{title}}</view>
        </view>
    </template>
    <script>
        export default {
            props: {
                title: {
                    default: "hello"
                },
            },
            methods:{
                changeTitle(){
                    //触发一个更新事件
                    this.$emit('update:title',"uni-app")
                }
            }
        }
    </script>

less

插槽

Vue 实现了一套内容分发的 API，将 slot 元素作为承载分发内容的出口。

它允许你像这样合成组件：

    <template>
        <view>
            <componentA>
                Your Profile
            </componentA>
        </view>
    </template>

在 <componentA> 的模板中可能会写为：

    <template>
        <view>
            <!-- 我是子组件componentA -->
            <view >{{title}}</view>
            <slot></slot>
        </view>
    </template>

当组件渲染的时候，<slot></slot> 将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML ：

    <template>
        <view>
            <!-- 我是父组件 -->
            <componentA>
                <view>Your Profile</view>
                <!-- 添加一个 uni-icons 图标 -->
                <uni-icons type="contact" size="30"></uni-icons>
            </componentA>
        </view>
    </template>

如果 <componentA> 的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

自定义组件.png