Vue创建组件的几种常用方式

现在使用Vue开发项目,应该没人不知道怎么写组件,但是实际上,组件创建前期的步骤都是一样,但使用方式却不同,每一种使用方式,都需要某些特定的方式支持。

例如下面最常见的使用方式:

  1. 业务组件内 使用的 局部组件
  2. 业务组件内 使用的 全局组件
  3. 通过 this.$xxx 的方式调用组件

开始准备

假设我们的项目结构 src 目录如下
src
├── App.vue
├── components
└── main.js

第一种:局部组件

局部组件就是定义一个组件,哪个业务组件需要用,局部引入注册,才能使用。

components 目录新建一个组件,叫 Dialog.vue,内容如下:

<template>
    <div id="dialog-content">
        <p>{{msg}}</p>
        <p>这是dialog组件,通过组件内部import引入再注册使用</p>
    </div>
</template>
<script>
export default {
    name: 'dialog-content',
    props: {
        msg: {
            type: String,
            default: 'this is dialog component'
        }
    }
}
</script>

然后在 App.vue 中使用:

import DialogContent from '@/components/Dialog.vue'

export default {
    components: {
        DialogContent
    }
}
<template>
    <div id="app">
        <dialog-content></dialog-content>
    </div>
<template>

第二种:全局组件

全部组件就是定义一个组件,在入口文件注册一下,所有组件均可以直接使用。

components 目录新建一个组件,叫 AutoInstall.vue,内容如下:

<template>
    <div id="auto-install-content">
        {{msg}}
        <p>这是自动安装组件,通过在main.js入口使用Vue.use(xxx)安装</p>
    </div>
</template>
<script>
export default {
    install(Vue) {
        Vue.component(this.name, this)
    },
    name: 'auto-install',
    props: {
        msg: {
            type: String,
            default: 'this is auto-install component'
        }
    }
}
</script>

然后再 main.js 中注册:

import AutoInstall from './components/AutoInstall'
Vue.use(AutoInstall)

最后在 App.vue 中使用:

<template>
    <div id="app">
        <auto-install></auto-install>
    </div>
<template>

第三种:挂载到原型上的组件

这种组件就是通过 this.$xxx 的方式调用,比如 提示 toast 等类型的组件。

components 目录新建目录,叫 tip,然后在该目录下创建两个文件:

  • Tip.vue
  • index.js

Tip.vue 内容如下:

<template>
    <div id="tip-content" v-if="visible">
        {{msg}}
        <p>这是通过this.$tip调用的</p>
        <button @click="hide">关闭</button>
    </div>
</template>
<script>
export default {
    name: 'tip',
    methods: {
        hide() {
            this.visible = false
        }
    }
}
</script>

index.js 内容如下:

import vue from 'vue'
import Component from './Tip.vue'

const Constructor = vue.extend(Component)
let instance = null

function show(text) {
    if (!instance) {
        instance = new Constructor({
            el: document.createElement('div'),
            data () {
                return {
                    visible: true
                }
            },
            props: {
                msg: {
                    type: String,
                    default: text
                }
            }
        })
        document.body.appendChild(instance.$el)
    }
    if (!instance.visible) {
        instance.visible = true
    }
    return instance
}

export default function () {
    vue.prototype.$tip = show
}

然后再 main.js 中注册:

import Tip from './components/tip/index'
Vue.use(Tip)

最后在 App.vue 中使用:

触发事件

<button @click="onOpen">提示tip</button>
<button @click="onHide" v-if="Tip">手动关闭tip</button>
data () {
    return {
        Tip: null
    }
},
methods: {
    onOpen() {
        this.Tip = this.$tip('提示吧')
    },
    onHide () {
        if (this.Tip) {
            this.Tip.hide()
            this.Tip = null
        }
    }
}

最终实现的效果,点击 提示Tip 按钮,Tip组件内容显示出来,然后点击Tip组件内的关闭按钮或 App,vue 中的关闭,都可关闭。

总结应用场景

  1. 某些局部公共组件
  2. 项目中全局组件
  3. 适合简单的提示或定制性较小的组件
Last modification:December 1st, 2019 at 01:14 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment