仿Element-UI组件封装起步2-vue公共组件的创建和使用

于 2020-10-25 22:25:40 发布
阅读量358 收藏
点赞数
分类专栏： 组件封装 组件库 文章标签： vue npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43909743/article/details/109280074
版权

目标：

  • 以button按钮为例，学习如何封装（与具体项目无关的组件–vant）及使用公共组件

知识点:

  • Vue.component() – 定义全局组件
  • Vue.use() – 使用插件

全局组件和局部组件

局部组件

  • 绝大多数vue项目就只有一个实例(new Vue()只运行一次)，即:一个项目就只有一个vue实例

  • 我们前面写组件一般都是直接写在vue实例中的，也就是局部组件

  • 这个组件不能在另一个项目中使用（复制粘贴代码不算哈）。

  • 典型使用格式：

在这里插入图片描述

import XXX from "./xxx/index.vue"
{
	data(){}
	components:{
		// 你的组件
		XXX
	}
}

全局组件

  • 组件在所有的vue实例中的都可以使用。
  • 与具体的vue项目无关，最典型的体现是ui框架(element-ui, ant-design, i-view, vant)
<van-button></van-button>

在使用van-button时，并没有去import, components: {…} 去写，而是直接在视图中使用

用Vue.component创建全局组件

Vue.component

Vue.component(id,definition)

  • 参数：

    • {string} id
    • {Function | Object} [definition]

  • 用法：

    注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

    // 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

  • 参考：组件

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-button></my-button>
    <hr>
    <com1></com1>
  </div>


  <div id="app2">
    <my-button></my-button>
    <hr>
    <com1></com1>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>

    // 创建一个全局组件
    Vue.component('MyButton', {
      template: `<div><button>全局组件-按钮</button></div>`
    })
    const com1 = {
      template: `<div>局部组件</div>`
    }
    
    new Vue({
      el: '#app',
      // 注册局部组件
      components: {
        com1
      }
    })

    // 下面的vue实例中，没有注册com1，所以com1不显示。
    // 对于my-button，它是全局的，并不需要在这里注册。
    new Vue({
      el: '#app2'
    })
  </script>
</body>
</html>

以上代码中：

  • MyButton是全局注册的组件
  • com1是局部组件
    在这里插入图片描述
    上面我们就实现了创建并使用全局组件了，这是一种比较原始的方式，在vue中，它给我们提供另一种比较优雅的方式:Vue.use

使用Vue.use()加载插件

Vue.use()是Vue对象上的全局方法，它用来把第三方插件挂载在vue上。

注意：这里的Vue是大写的V。

见世面-看看别人的用法

其实，在前面的学习中，我们已经看过了Vue.use()了。

  • vue-router
  • vuex
  • element-ui
  • vant

Vue-Router

import VueRouter from "vue-router"
import Vue from "vue"
import Index from "../pages/index.vue"
import Headline from "../pages/headline.vue"
import Tab from "../pages/tab.vue"
import Dialog from "../pages/dialog.vue"
Vue.use(VueRouter)
export default new VueRouter({
routes: [
    { name: 'home', path: '/', component: Index },
       { name: 'headline', path: '/headline', component: Headline },
       { name: 'tab', path: '/tab', component: Tab },
       { name: 'dialog', path: '/dialog', component: Dialog }
   ]
  });

element-ui的使用
https://element.eleme.cn/#/zh-CN/component/quickstart#yin-ru-element

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
el: '#app',
render: h => h(App)
  });

vant组件的库的使用

https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-san.-dao-ru-suo-you-zu-jian

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

格式

Vue.use(plugin) // Vue.use(vuex) Vue.use(vuer-router), Vue.use(vant)…

  • 功能：

    安装 Vue.js 插件(插件：理解为智能设备；组件：理解为手机)。

  • 参数：plugin。它表示要安装的插件

    • 可以是一个对象
    • 也可以是一个函数

  • 用法：

    如果plugin是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

    该方法需要在调用 new Vue() 之前被调用。

    当 install 方法被同一个插件多次调用，插件将只会被安装一次。

  • 参考：插件

用Vue.use()来改造代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-button></my-button>
    <my-headline></my-headline>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>

    // 创建一个全局组件
    // Vue.component('MyButton', {
    //   template: `<div><button>全局组件-按钮</button></div>`
    // })

    const MyButton = {
      install: function (Vue) {
        console.log('install被执行....', Vue)
        
        // 创建一个全局组件
        Vue.component('MyButton', {
          template: `<div><button>全局组件-按钮</button></div>`
        })
      }
    }


    const MyHeadline = {
      install: function (Vue) {
        console.log('install被执行....', Vue)
        
        // 创建一个全局组件
        Vue.component('MyHeadline', {
          template: `<div>标题</div>`
        })
      }
    }
    // 从格式上，以插件的方式来注册全局组件
    // 优雅
    Vue.use(MyButton)
    Vue.use(MyHeadline)
  
    new Vue({
      el: '#app',
    })
  </script>
</body>
</html>

注册多个组件

  • 如果有多个组件，则需要以一个大对象的方式给它们包起来，然后在install中把它们都注册成全局组件。
  • 除了组件之外，还可以添加过滤器，在原型对象上添加新的属性（例如：eventBus）
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">

    <my-alert></my-alert>
    <my-button></my-button>

    {{name | format}}
    
    <input v-focus />

    <button @click="hClick">点我</button>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script> -->

  <script>
    const MyAlert = {
      template: "<div>我是一个提示组件</div>"
    }
    
    const MyButton = {
      template: "<div>我是一个MyButton组件</div>"
    }

    // 组件库：有两个组件
    const MyEleUI = {

      install: function (Vue) {
        // 定义全局组件
        Vue.component('MyAlert', MyAlert)
        Vue.component('MyButton', MyButton)

        // 定义全局过滤器
        Vue.filter('format', function(val) {
          return 'formated' + val
        })

        // 自定义指令
        // 注册一个全局自定义指令 `v-focus`
        Vue.directive('focus', {
          // 当被绑定的元素插入到 DOM 中时……
          inserted: function (el) {
            // 聚焦元素
            el.focus()
          }
        })

        // 通过原型链，给vue添加新属性，新方法
        Vue.prototype.$version = "1.0.0"
        Vue.prototype.$alert = function(msg) {
          alert('系统提示' + msg)
        }
      }
    }


    Vue.use(MyEleUI) // 扩展了Vue的功能

  
    const vm1 = new Vue({
      el: '#app',
      data: {
        name: '小王'
      },
      methods: {
        hClick () {
          alert(this.$version)

          this.$alert('click')
        }
      }
    })

  </script>
</body>
</html>

小结

e.$alert = function(msg) {
alert(‘系统提示’ + msg)
}
}
}

Vue.use(MyEleUI) // 扩展了Vue的功能


const vm1 = new Vue({
  el: '#app',
  data: {
    name: '小王'
  },
  methods: {
    hClick () {
      alert(this.$version)

      this.$alert('click')
    }
  }
})
```

小结

vue开发公共组件需要用到Vue.use()和Vue.component()两个api。

Best_卡卡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值