在一個vue頁面中有時候內容會很多，為了方便編寫查看，可以分為多個子組件，最后在父組件中引入對應的子組件即可。
下面這個是父子組件通信中的一個具體實例：新增、修改彈框。 子組件中主要寫了關於新增、修改的彈框，
子組件：
1.彈框：
<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>
<template>
<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>
</template>
<script>
export default {
props:["modify", "headers"],
components:{
},
data() {
return {
form: {
date: '',
name: '',
province: '',
city: '',
address: '',
zip: '',
},
rules: {
}
};
},
watch: {
modify: function(){
this.form = this.modify;
}
},
methods: {
submitForm(formName) {
},
cancel() {
this.$emit("cancel")
}
}
}
</script>
<style lang="scss" scoped>
.newDocuments{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background: rgba($color: #000000, $alpha: 0.4);
// display: flex;
// align-items: center;
// justify-content: center;
min-height: 500px;
overflow: auto;
.newDocuments_center{
width: 43%;
background: white;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
position: relative;
margin: 5% auto; /*水平居中*/
top: 70px; /*偏移*/
transform: translateY(-50% -50%);
.center_header{
background: #f8f8f8;
height: 45px;
border-bottom: 1px solid #e7eaec;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 3px;
font-size: 14px;
.header_left{
margin-left: 20px;
}
.header_right{
margin-right: 20px;
display: flex;
align-items: center;
div{
margin-left: 10px;
cursor: pointer;
}
}
}
.center_center{
border-radius: 3px;
width: 97%;
margin: 20px auto;
padding: 0 0 20px 0;
/deep/ .el-form-item__label {
font-size: 15px !important;
}
/deep/ .el-input__inner{
height: 30px;
line-height: 30px;
}
/deep/ .el-form-item {
margin-bottom: 12px;
}
/deep/ .el-form-item__content {
line-height: 30px;
position: relative;
font-size: 14px;
width: 300px;
}
/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner{
width: 300px;
line-height: 30px;
position: relative;
font-size: 14px;
}
/deep/ .el-input__icon{
line-height: 30px;
height: 30px;
}
/deep/ .el-form-item__error {
color: #f56c6c;
font-size: 12px;
line-height: 2px;
padding-top: 0px;
position: absolute;
top: 100%;
left: 0;
}
/deep/ .el-form-item {
margin-bottom: 0px;
}
/deep/ .el-form-item__content{
width:100%;
display: flex;
}
/deep/ .el-form-item__label{
line-height: 27px;
}
/deep/ .el-button{
padding: 7px 14px;
font-size: 14px;
border-radius: 2px;
}
/deep/ .el-form-item__label {
font-size: 15px !important;
}
}
}
}
</style>
OK了。