1. 父组件代码
<template>
<div>
<!-- 栏目树状结构 -->
<el-container>
<el-aside width="200px">
<el-tree :data="columnTree" :props="defaultProps" node-key="id" show-checkbox ref="tree" accordion default-expand-all @node-click="handleNodeClick"></el-tree>
</el-aside>
<el-main>
<!-- 搜索条件 -->
<div>
<!-- 引入子组件 -->
<!-- ref='edit' 定义子组件名称,用于父组件调用子组件的方法 -->
<!-- @reload="getColumnTree" 用于子组件调用父组件的方法 reload是子组件调用函数名,getColumnTree是实际被调用的函数 -->
<edit ref='edit' @reload="getColumnTree"></edit>
</div>
</el-main>
</el-container>
<!-- 博客的展示 -->
</div>
</template>
<script>
import $edit from '@/components/communal/markdown/columnEdit.vue'
import 'mavon-editor/dist/css/index.css'
export default {
components: {
'edit': $edit
},
created () {
this.getColumnTree()
},
data () {
return {
columnTree: [
],
defaultProps: {
children: 'children',
label: 'name'
}