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

Posted 2021-08-03 小歌谣（公众号同名）

首先我们知道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(&