vue中注册全局自定义组件

出发思想:主要是把子组件导入main.js 并挂载到vue原型属性component上面，在父组件中可以直接是使用挂载时起的名字。

父组件

<template>
      <div class="mobelboxright">
         <mi-list :mobellist="mobellist"></mi-list> //1调用原型上的标签
      </div>
</template>
 
<script>
import indexAPI from "../../api/index";//这里是获取数据的API导入(做定义组件可以忽略)
export default {
  name: "Father",
  data() {
    return {
      mobellist: {},//2存放数据的对象
    };
  },
  created() {
    this.geTList();
  },
  methods: {
    //3请求数据
    async geTList() {
      let { data: res } = await indexAPI.getList({ categoryName: "手机" });
      console.log(res.Product);
      this.mobellist = res.Product;
    },
  },
};
</script>

子组件

<template>
  <div>
    // ul li 数据  需要v-for渲染
  </div>
</template>
 
<script>
export default {
  props: ["mobellist"], //1父传子 接受过来的数据
  name: "MiList",//2这个子组件名字
};
</script>
 
<style lang="scss" scoped>
    //样式
</style>

main.js

//注册全局组件
import MiList from './components/list.vue'
Vue.component('MiList',MiList)