关闭

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

时间: 2021-02-02阅读: 151标签: 组件

创建项目

通过 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

    站长推荐

    1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

    2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

    编写 Vue.js 组件前需要知道的 10 件事

    本文介绍了编写 Vue.js 组件前需要知道的 10 件事,其中包括:组件可以全局或局部加载;延迟加载 / 异步组件;必需的 Props;使用 $emit 触发自定义事件;多 Props 绑定和覆盖等等。

    less组件库主题定制; 给项目设置常用样式common.less

    一般组件库的样式编写都会为使用者设计一些主题样式更换方案,我这里根据自己对主流组件库antd和iview的研究,总结出这两类:iview引入主题样式,复写,antd通过less-loader的modifyVars注入主题变量

    深入探讨前端组件化开发

    前端组件化开发,已经有多年的历史了,不管是服务端渲染,还是前端SPA,都有了比较成熟的组件化开发的方案。 随着组件化开发的普及,前端社区中贡献了很多不错的前端组件,都提供开箱即用的方案,使得更好的发挥组件化的优势。

    使用Typescript装饰器来劫持React组件

    装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

    父组件从vuex获取数据给子组件传值延迟问题

    做项目的时候发现如果子组件在页面比较靠上,子组件渲染的时候父组件还未取到值,导致子组件取不到数据

    Vue实现Tab控件

    使用Vue实现Tab功能。创建一个tab.vue文件,内容如下:其中change方法和tabs需要父组件中定义,tabs的格式如下:为确保正确渲染,id需要保证唯一性。

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

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

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

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

    react-native时间轴组件的使用

    最近在写公司的项目,因产品设计需求,需要类似如下的效果,像是一个时间轴。本着不重复造轮子的目标,在最喜欢的github上找寻合适的组件

    Vue动态加载组件

    使用import导入组件,可以获取到组件;使用import导入组件,直接将组件赋值给componet;使用require 导入组件,可以获取到组件;使用require 导入组件,直接将组件赋值给componet

    点击更多...

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