在一个vue页面中有时候内容会很多，为了方便编写查看，可以分为多个子组件，最后在父组件中引入对应的子组件即可。
下面这个是父子组件通信中的一个具体实例：新增、修改弹框。 子组件中主要写了关于新增、修改的弹框，
子组件：
1.弹框：
可以直接使用elementui的el-dialog来写，很多样式就可以省略。
<div class="newDocuments">
<div class="newDocuments_center">
<div class="center_header">
<div class="header_left">{{ headers }}</div>
<div class="header_right">
<div @click="cancel" style="font-size:20px;">x</div>
</div>
</div>
<div class="center_center">
<el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
<el-form-item label="日期" style="width:422px;height:51px;">
<el-input v-model="form.date" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名" style="width:422px;height:51px;">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="省份" style="width:422px;height:51px;">
<el-input v-model="form.province" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="市区" style="width:422px;height:51px;">
<el-input v-model="form.city" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" style="width:422px;height:51px;">
<el-input v-model="form.address" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="邮编" style="width:422px;height:51px;">
<el-input v-model="form.zip" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')" v-if="headers == '新增'">立即添加</el-button>
<el-button type="primary" @click="submitForm('form')" v-else>立即修改</el-button>
<el-button @click="cancel">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
2.接收的数据以及需要依靠父组件的点击事件
props:["modify", "headers"],
cancel() {
this.$emit("cancel")
}
3.新增、修改时弹框显示的内容需要进行监听
watch: {
modify: function(){
this.form = this.modify;
}
},
父组件：
1.引入子组件：
<children v-show="addTo" @cancel="cancels" :modify='modify' :headers='headers'></children>
import children from './father/children'
components: {
children,
},
2.定义需要传给子组件的数据：
modify: '', headers: '',
3.点击新增、修改按钮时传对应的数据给子组件：
addData(){
this.addTo = true;
this.modify = {
date: '',
name: '',
province: '',
city: '',
address: '',
zip: '',
};
this.headers = '新增';
},
editData(row){
this.addTo = true;
this.modify = row;
this.headers = '修改';
},
cancels(){
this.addTo = false;
}
注意：
1.父子组件之间可以双向传值，父组件向子组件传值使用props，子组件向父组件传值需要依赖事件，然后通过emit传递。
2.在子组件中定义事件以及需要传递的值：
emit中的cancel为子组件向父组件传值定义的方法名称，后面可以加需要传递的值，只是在该例子中不需要传值。
cancel() {
this.$emit("cancel"， value)
}
3.在父组件中通过定义的方法接收到子组件传递的参数，即可。
cancels(data){
console.log(data);
}
完整代码：
<template>
<div class="contrainer">
<children v-show="addTo" @cancel="cancels" :modify='modify' :headers='headers'></children>
<div class="contrainer_top">
<el-button @click="addData" type="primary" size="small">新增</el-button>
</div>
<div class="contrainer_bottom">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
min-width="50">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
min-width="50">
</el-table-column>
<el-table-column
prop="province"
label="省份"
min-width="70">
</el-table-column>
<el-table-column
prop="city"
label="市区"
min-width="70">
</el-table-column>
<el-table-column
prop="address"
label="地址"
min-width="120">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
min-width="50">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button @click="editData(scope.row)" type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import children from './father/children'
export default {
name: 'father',
components: {
children,
},
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}],
addTo: false,
modify: '',
headers: '',
}
},
methods: {
addData(){
this.addTo = true;
this.modify = {
date: '',
name: '',
province: '',
city: '',
address: '',
zip: '',
};
this.headers = '新增';
},
editData(row){
this.addTo = true;
this.modify = row;
this.headers = '修改';
},
cancels(){
this.addTo = false;
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.contrainer{
.contrainer_top{
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.contrainer_bottom{
/deep/ .el-table .cell {
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
word-break: break-all;
line-height: 15px;
}
/deep/ .el-table thead th {
padding: 4px 0;
font-size: 14px;
color: #43464a;
background-color: #f5f6fa !important;
border-bottom: 1px solid #dee2ed;
border-right: 1px solid #ebeef5;
}
/deep/ .el-table td, .el-table th.is-leaf {
border-bottom: 1px solid #EBEEF5;
}
.el-table th, .el-table td {
padding: 10px 0;
}
}
}
</style>