Vue组件混入和组件递归(学习笔记，小知识点，忘记可复习)

组件混入

在vue开发中，我们可能会遇到许多不同的组件有着类似的功能，这些功能代码分散在组件的不同的配置中

这时候就会出现代码的冗余，而我们要减少代码的冗余，可以把这些配置代码抽离出来，利用混入融合到组件中

做法也很简单

//创建一个JS文件用来抽离公共代码(fetchData.js)

// 抽离的公共代码
export default function(defaultDataValue = null) {
    return {
        data(){
            return {
                 isLoading: true,
                 data:defaultDataValue,
            }
        }
    async created() {
      this.data = await this.fetchData();
      this.isLoading = false;
    },
    }
}

引用，在自己需要用到此代码的组件中引入

//引入fechData.js
export default {
    mixins: [fetchData([])],
}

组件的递归

有时候我们会遇到在组件的内部自我递归，这时候我们会懵，怎么递归呢？自己导入自己吗？其实不然。

//创建了一个叫RightList.vue的组件
//这里的RightList.vue组件需要在内部自我递归
//平常我们是不会给组件命名的，但是要在组件内部自我递归，就要用到了命名了
<RightList :list="item.children" @select="handleClick" />
export default {
    name: "RightList",//如果没给组件命名，浏览器就不认识RightList
}