vue 父组件调用子组件的函数_Vue前台布局设置，以及父子组件的调用

1. 在一般开发中，页面的布局为左面是树菜单，右面表格数据，在这里设置elemeui的布局：span总共长度是24

<template>  <el-row :gutter="20">    <el-col :span="6">        菜单    el-col>    <el-col :span="18">        表格    el-col>  el-row>template>

    2.设置好之后再次新建一个公共的vue类，因为多处需要这个布局，所以提取出来：

<template>  <el-tree :data="menus"           :props="defaultProps"           :expand-on-click-node="false"           ref="menuTree">  el-tree>template><script>  export default {    //import引入其他组件需要注入到对象中才能使用    components:{},    props:{},    data(){      return {        menus: [],        expanded:[],        defaultProps: {          children: 'children',          label: 'name'        }      };    },    methods:{      //真正要发送的请求      getMenus(){        this.$http({          url: this.$http.adornUrl('/product/category/list/tree'),//请求路径          method: 'get',//请求方式          /* params: this.$http.adornParams({//带参数的用这个方法以key:value的方式传递             'page': this.pageIndex,             'limit': this.pageSize,             'roleName': this.dataForm.roleName           })*/        }).then(({data}) => {//请求成功之后就是then了          console.log("成功获取数据",data.data)          this.menus=data.data;        })      },    },    //计算属性 类似于data概念    computed:{},    //监控data中的数据变化    watch:{},    //生命周期 -创建完成(可以访问当前this实例)    created() {      this.getMenus();    },    //生命周期 -挂在完成(可以访问dom元素)    mounted() {},    beforeCreate() {},//生命周期  创建之前    beforeMount() {},//生命周期  挂载之前    beforeUpdate() {},//生命周期  更新之前    updated() {},//生命周期  更新之后    beforeDestroy() {},//生命周期  销毁之前    destroyed() {},//生命周期  销毁完成    activated() {}//如果页面有keep-alive缓存功能，这个函数会触发  }script><style scoped>style>

    3.创建好公共的类之后，就要在调用的这个类中写好引入的包

//想要公共的组块名称呢，要导入进来-->import Category from '../common/category'import AddOrUpdate from './attrgroup-add-or-update'

    4.引入包之后还要注入到对象中才能使用，然后用组件的名字作为标签名：

 export default {    //import引入其他组件需要注入到对象中才能使用,然后用组件名字做为标签名    components:{Category,AddOrUpdate },},

<el-col :span="6">      <category>category>    el-col>    <el-col :span="18">el-row>

    5.导入逆向生成的前端代码的表单项，开始拿过来，最终的展示效果如下

    6.接下来就是父子组件传递数据，子组件给父组件传递数据(我定义子组件是树节点)，事件机制，子组件给父组件发送一个事件，并携带上数据。

查看官网，树节点有一个单击事件@node-click单击事件；this.$emit("tree-node-click",data,node,component)是传递给父组件的事件和数据的：

  :data="menus"           :props="defaultProps"           :expand-on-click-node="false"           ref="menuTree"           @node-click = "nodeclick"  >  </el-tree>

nodeclick(data,node,component){  console.log("树节点被点击",data,node,component)  //向父组件发送时间  tree-node-click  随便写，用来跟父组件的点击事件@tree-node-click  this.$emit("tree-node-click",data,node,component)}

    7.传递到父组件之后，要在父组件的菜单树位置写上刚刚定义的变量名

<category @tree-node-click="treenodeclick">category>

    8.写上方法，这时候就有了新的点击事件并且携带数据了：

//感知树节点被点击treenodeclick(data,node,component){  console.log("attrgroup感知到节点被点击",data,node,component)  console.log("刚才被点击的菜单id",data.catId)},

以上是我的个人笔记，探索未知密宝，记录学习笔记，分享有趣的故事，欢迎大家来访！