手动封装element-ui里面的button组件

Posted 小歌谣(公众号同名)

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手动封装element-ui里面的button组件相关的知识,希望对你有一定的参考价值。

首先我们知道vue里面包含有父子组件

但是你知道如果要进行一个element的手动组件封装

怎么封装吗

1首先第一步

首先我们建立一个组件

最好设置在一个文件目录下比如components

只是一个普通的组件

叫做OneButton.vue

    <template>
      <button class="one-button">
       按钮组件
      </button>
    </template>
     
    <script>
     
    export default {
      name: \'oneButton\'
    }
</script>
     
    <style lang="scss">
</style>

要想使用该组件

就需要进行全局注册

就是在main.js里面注册了

 import Vue from \'vue\'
    import App from \'./App.vue\'
    // 第一步:导入button组件
    import OneButton from \'./components/button.vue\'
     
    Vue.config.productionTip = false
     
    // 第二步:注册组件,设置(组件名,组件)
    Vue.component(OneButton.name, OneButton)
     
    new Vue({
      render: h => h(App)
    }).$mount(&

以上是关于手动封装element-ui里面的button组件的主要内容,如果未能解决你的问题,请参考以下文章

element-ui中动态修改组件属性的值

封装element-ui的table自定义表头组件

Element-Ui组件Button 按钮

Element-Ui组件Button 按钮

饿了么element-ui源码解读 button

解决低版本引入高版本element ui组件单独全局注册