Vue2.x 中注册自定义组件的3种方式

更新日期: 2021-02-02阅读: 1.4k标签: 组件

创建项目

通过 cmd 执行如下示例命令来初始化我们的 vue 项目

vue create helloworld
cd helloworld
code .
npm run serve

命令执行完成后,项目结构如下图所示:


接着,我们在 src/components 目录下创建一个自定义的组件 splash.vue,示例代码如下所示:

<template>
  <div>
    <p>{{ title }}</p>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "splash",
  props:['title'],
  data: function () {
    return {
      message: "组件启动中...",
    };
  },
};
</script>

注册成局部组件

我们知道,通过 Vue-CLI 创建的项目,vue 会自动为我们创建一个 App.vue 的根组件,用于承载整个应用程序,如果我们在 App 的 components 注册我们的自定义组件,那么它也算一个局部组件,只能应用在 App 这样的一个组件内。注册方式如下所示:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- 3.应用自定义组件 -->
    <splash title="hello world"></splash>
  </div>
</template>

<script>
// 1.导入组件
import Splash from "./components/Splash.vue";

export default {
  name: "App",
  components: {
    // 2.注册局部组件
    Splash,
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

执行 npm run serve,会出现如下所示的效果:



注册成全局组件

如果想将我们的组件注册成全局组件,共其它所有组件都能使用的话,我们就需要将我们的组件注册成全局组件。同样的,我们需要在 'main.js' 中注册我们的全局组件,示例代码如下所示:

import Vue from 'vue'
import App from './App.vue'
// 1. 导入自定义组件
import Splash from './components/Splash.vue'
Vue.config.productionTip = false
// 2. 将自定义组件注册成全局组件
Vue.component(Splash.name, Splash)
new Vue({
  render: h => h(App),
}).$mount('#app')

修改 HelloWorld.vue,使用上面已经注册的全局组件,示例代码如下所示:

<template>
  <div>
    <h1>{{ msg }}</h1>
    <!-- 应用自定义组件 -->
    <splash></splash>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<style scoped>
.hello {
  border: 1px dashed #00f;
}
</style>

修改 App.vue,使用上面已经注册的全局组件,示例代码如下所示:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <splash></splash>
    <hello-world msg="我是子组件"></hello-world>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

执行 npm run serve,会出现如下所示的效果:



注册成插件

由于插件更具灵活性,所以我们可以自定义组件注册成全局组件。按照 Vue 的约定,我们需要将我们的项目结构做一下调整。

在 src/plugin 目录下建一个和组件名称一致的文件夹,然后将我们上面定义的 splash.vue 文件放到这个目录下面,然后在这个目录下面再建一个 index.js 的文件,通过在这个文件里面写注册代码,将我们的自定义组件注册成插件。示例代码如下所示:

import Splash from './Splash'

export default {
    install: function (Vue, options) {
        // 1.获取构造函数
        const contructor = Vue.extend(Splash)
        // 2. 实例化组件对象
        const instance = new contructor()
        // 3. 创建页面元素
        const oDiv = document.createElement('div')
        document.body.appendChild(oDiv)
        // 4. 将组件挂载到页面元素上
        instance.$mount(oDiv)
        if (options !== null && options.title !== undefined) {
            instance.title = options.title
        }
        // 添加全局方法
        Vue.ToggleSplash = function () {
            instance.isShow = !instance.isShow;
        }
        // 添加实例方法
        Vue.prototype.$ToggleSplash = function () {
            instance.isShow = !instance.isShow;
        }
    }
}

修改 main.js ,示例代码如下所示:

import Vue from 'vue'
import App from './App.vue'
// 1. 导入自定义组件
import Splash from './plugin/splash/index'

Vue.config.productionTip = false
// 2. 将自定义组件注册成组件
Vue.use(Splash, { title: 'hello world' })
new Vue({
  render: h => h(App),
}).$mount('#app')

接下来,我们就可以在 任何组件中通过调用 Vue 对象的全局方法或实例方法来控制我们的自定义组件,比如,我们可以在 hello-world 这样使用:

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="toggle1">使用全局方法控制显示或隐藏插件</button>
    <button @click="toggle2">使用实例方法控制显示或隐藏插件</button>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    toggle1: function () {
      // 通过全局方法来访问自定义组件
      Vue.ToggleSplash();
    },
    toggle2: function () {
      // 通过实例方法来访问自定义组件
      this.$ToggleSplash();
    },
  },
};
</script>

<style scoped>
.hello {
  border: 1px dashed #00f;
}
</style>

执行 npm run serve

    链接: https://www.fly63.com/article/detial/10154

    Vuetify基于vue2.0,为移动而生的组件框架

    Vuetify 支持SSR(服务端渲染),SPA(单页应用程序),PWA(渐进式Web应用程序)和标准HTML页面。 Vuetify是一个渐进式的框架,试图推动前端开发发展到一个新的水平。

    Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法

    通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数,slot的使用就像它的名字一样, 在组件内定义一块空间。在组件外, 我们可以往插槽里填入任何元素。slot-scope的作用就是把组件内的数据带出来

    react 函数子组件(Function ad Child Component)

    函数子组件(FaCC )与高阶组件做的事情很相似, 都是对原来的组件进行了加强,类似装饰者。FaCC,利用了react中children可以是任何元素,包括函数的特性,那么到底是如何进行增强呢?

    Vue和React组件之间的传值方式

    在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些?组件间的传值是灵活的,可以有多种途径,父子组件同样可以使用EventBus,Vuex或者Redux

    vue.js自定义组件directives

    自定义指令:以v开头,如:v-mybind。bind的作用是定义一个在绑定时执行一次的初始化动作,观察bind函数,它将指令绑定的DOM作为一个参数,在函数体中,直接操作DOM节点为input赋值。

    vue中prop属性传值解析

    prop的定义:在没有状态管理机制的时候,prop属性是组件之间主要的通信方式,prop属性其实是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件。 prop属性中可以定义属性的类型,也可以定义属性的初始值。

    Web组件简介

    Web组件由三个独立的技术组成:自定义元素。很简单,这些是完全有效的HTML元素,包含使用一组JavaScript API制作的自定义模板,行为和标记名称(例如,<one-dialog>)。

    web组件调用其他web资源

    web组件可以直接或间接的调用其他web资源。一个web组件通过内嵌返回客户端内容的另一个web资源的url来间接调用其他web资源。在执行时,一个web资源通过包含另一个资源的内容或者转发请求到另一个资源直接调用。

    vue中如何实现的自定义按钮

    在实际开发项目中,有时我们会用到自定义按钮;因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就派上了大用场,我们把定义好的按钮组件导出,在全局引用,就可以在其他组件随意使用啦,这样可以大幅度的提高我们的工作效率。

    Vue子组件调用父组件的方法

    Vue中子组件调用父组件的方法,这里有三种方法提供参考,第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法,第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

    点击更多...

    内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!