美文网首页
vue创建全局组件

vue创建全局组件

作者: jerryst | 来源:发表于2020-05-27 10:16 被阅读0次

    前置工作:在src/components中新建quanju文件夹,再创建quanju.vue, index.js

    quanju.vue
    <template>
      <div>全局组件</div>
    </template>
    <script>
      export default {
        name: 'quanju',
        data () {
          return {}
        }
      }
    </script>
    <style>
    </style>
    
    
    index.js
    import quanjuComponent from './quanju.vue'
    const quanju = {
      install: function(Vue) {
        Vue.component('quanju', quanjuComponent)
      }
    }
    // 导出组件
    export default quanju
    
    
    main.js中配置
    /**
     * 全局组件
     */
    import quanju from './components/quanJu/'
    Vue.use(quanju);
    
    
    页面中使用
    <template>
        <div>
          <quanju></quanju>
        </div>
    </template>
    

    相关文章

      网友评论

          本文标题:vue创建全局组件

          本文链接:https://www.haomeiwen.com/subject/csniahtx.html