抽取组件
当vue的组件要持续复用的时候,最好的办法是抽取组件放到一个专门的公共组件文件夹中,这里我们抽取一下三级分类的树形结构组件:
最好建一个公共文件夹,将抽取的组件存到里边,我们将
product里的category里的树形结构组件抽出来放到common里的category中
<template>
<div>
<el-tree
:data="TreeMenus"
:props="defaultProps"
node-key="catId"
ref="menuTree"
@node-click="nodeclick"
>
</el-tree>
</div>
</template>
<script>
export default {
// 抽取树形结构的组件
components: {},
props: {},
data () {
return {
TreeMenus: [],
defaultProps: {
children: 'children',
label: 'name'
},
dialogVisible: false
}
},
created () {
this.getTreeMenus()
},
methods: {
getTreeMenus () {
this.dataListLoading = true
this.$http({
'url': this.$http.adornUrl('/product/category/list/tree'),
'method': 'get'
}).then(res => {
this.TreeMenus = res.data.data
console.log('treeMenus:', res.data.data)
})
},
}
}
</script>
<style scoped>
</style>
这是抽取出来的树形结构组件。
我们将在attrgroup中使用所抽取的组件:
首先通过import导入抽取过来的组件:
import 《组件名称》 from ‘《组件路径》’;
import Category from '../common/category'
然后再将引入的组件通过components注入到对象中
export default {
// import引入的组件需要注入到对象中才能使用
components: {Category}
}
通过标签的方式来使用组件就OK了
组件通信:
如果父组件想使用子组件的数据,换句话说就是当子组件的数据发生变化后父组件该怎样 感应子组件的数据变化?
这里拿抽取出来的树形结构来举例:
el-tree 当子节点被点击后,可以拿到被点击子节点的数据,根据官方所提供的:nodeclick 方法
需要的三个参数:data, node, component
我们打印一下:
被点击的节点的数据信息以及节点信息清楚地展现出来
现在的问题是这是个被抽取出来的组件是被父组件所使用的,那么父组件使用这个组件的时候该怎么拿到这些数据呢?
使用$emit向父组件发送事件信息
this.$emit(param1:"事件名称",param2:"携带的数据")
父组件这样接收子组件发送来的事件信息:
@tree-node-click是子组件发送过来的事件名称,treeNodeClick使我们父组件自定义的方法名称,
在Methods里使用就行了:
本人小白记录日常,还请大佬勿喷!