出发思想:主要是把子组件导入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)
效果示例图: