子组件接收父组件传递的数据以及调用父组件传过来的方法
父组件 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的代码
效果图是如下