自定义组件

  • 组件是视图层的基本组成单元。
  • 组件是一个单独且可复用的功能模块的封装。
  • 一个组件包括开始标签和结束标签,标签上可以写属性,并对属性赋值。内容则写在两个标签之内。
  • 根节点为 <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 StringNumberBooleanArrayObjectDateFunctionSymbol ,任何自定义构造函数、或上述内容组成的数组 会检查一个 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>

refv-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

推荐阅读更多精彩内容