vue子父组件传值及事件

子组件接收父组件传递的数据以及调用父组件传过来的方法



父组件 menus_items.vue的代码(做的是一个添加el-dialog功能)

<template>
  <section class="SystemSchool">
   <!--创建学校  -->
    <el-dialog
      title="创建学校"
      width="900px"
      :visible.sync="CreatSchoolVisible">
      <AddTemplete :formType="'学校'" @changeCancle="changeCancle" @changeSubmit="changeSubmit" />
    </el-dialog>
    <el-button type="primary" @click="CreatSchoolVisible = true">创建学校</el-button>
    </section>
</template>
<script>
import AddTemplete from "./templete.vue";
export default {
  components: {
    AddTemplete
  },
  data() {
    return {
      CreatSchoolVisible: false
    };
  },
  methods: {
    // templete子组件触发的方法
    changeCancle(val) {
      this.CreatSchoolVisible = false;
    },
    // templete子组件触发的方法
    changeSubmit(val) {
      this.pageNo = 1;
      // this.getSchool();
      this.CreatSchoolVisible = false;
    }
  }
};
</script>

子组件templete.vue组件
接收变量

调用父组件的方法

templete的代码

效果图是如下