$emit
使用emit可以让我们方便的从子组件向父组件传递属性传递值
如以下例子,我想要通过父子组件互相传递值的方法控制对话框Dialog的显示或者关闭
父组件
我们通过dialogFormVisible这个属性向子组件传递值,并传递了一个方法changeShow过去
在编辑按钮中我们也绑定了一个方法,它可以直接让子组件显示
<template>
<div>
<Add :form="form" :dialogFormVisible="dialogFormVisible" @changeShows="changeShow"></Add>
<el-table
:data="tableData"
style="width: 100%;text-align: center;"
stripe
border>
<el-table-column
prop="index"
label="序号"
width="180">
</el-table-column>
<el-table-column
prop="PICKNO"
label="单号"
width="180">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Add from './add.vue'
export default {
data() {
return {
tableData: [{
index:1,
PICKNO: 'JH20210408'
}],
form: {
PICKNO: ''
},
dialogFormVisible:false
}
},
components:{
Add
},
methods:{
handleEdit:function(index,row){
const form={
PICKNO:row.PICKNO
}
this.form=form;
this.dialogFormVisible=true;
},
changeShow(dialogFormVisible){
this.dialogFormVisible=dialogFormVisible;
}
}
}
</script>
<style>
</style>
子组件
我们在子组件中使用props获取父组件传递过来的值,然后在method定义了一个方法,使用$emit来调用父组件传递的方法来改变父组件属性的值,第一个参数时传过来的方法名称,在父组件中定义了:@changeShows="changeShow"
,第二个参数就是传递过来的方法的参数了
<template>
<div style="text-align: end;">
<el-button type="primary" style="" @click="cancle(true)">新增</el-button>
<el-dialog width="1200px" title="" :visible.sync="dialogFormVisible">
<el-form :model="form">
<table>
<tr>
<td>
<el-form-item label="单号" :label-width="formLabelWidth">
<el-input v-model="form.PICKNO" autocomplete="off"></el-input>
</el-form-item>
</td>
<td>
</tr>
</table>
<el-table>
</el-table>
</el-form>
<div style="text-align: center;">
<el-button @click="cancle(false)">取 消</el-button>
<el-button type="primary" @click="cancle(false)">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default{
name:"add",
data(){
return{
formLabelWidth: '70px'
}
},
props:{
form:Object,
dialogFormVisible:Boolean
},
methods:{
cancle(isShow){
this.$emit("changeShows",isShow);
}
}
}
</script>
<style>
</style>
高级写法
我又学会了一种更简单的写法,主要代码如下
1.父组件在<template>
中引用子组件时,需要传递的属性后面记得加一个.sync,然后我们就不需要跟之前一样传递一个方法过去了
2.子组件可以直接在$emit中这样写"update:xxx",这个update是固定写法,后面跟的xxx是父组件data中声明的属性,第二个参数是要传递的属性值
//子组件
<template>
<el-button type="primary" style="" @click="cancle(true)">新增</el-button>
<el-dialog :visible.sync="dialogFormVisible"
</el-dialog>
</template>
<script>
export default{
props:{
dialogFormVisible:Boolean
},
methods:{
cancle(isShow){
this.$emit("update:dialogFormVisible",isShow);
}
}
}
</script>
//父组件
<template>
<Add :form="form" :dialogFormVisible.sync="dialogFormVisible"></Add>
</template>
<script>
export default{
data(){
return{
dialogFormVisible:false
}
}
}
</script>