Vue创建全局组件info组件的步骤

Vue创建全局组件info组件的步骤

1、main.js 函数文件引用

import Good from './components/ui/index'
Vue.use(Good)

2、components/ui/inde.js文件内容

import Vue from 'vue';
import goodInfo from './info/index'

const components = {
goodInfo
};

Vue.use(components.goodInfo)
export default components;

3、components/ui/info/index.js内容

import component from './index.vue'
const goodInfo = {
  install:function (Vue) {
    Vue.component('goodInfo',component)
  }
};
// 导出组件
export default goodInfo

4、components/ui/info/index.Vue内容

<template>
  <div>{{test}}</div>
</template>

<script>
  export default {
    data() {
      return {
        test:'123456======'
      }
    },
  }
</script>