前提：
父組件向子組件傳值埂息，可以通過 props ；若我們通過子組件去修改父組件的值，當(dāng)然也可以通過 $emit('方法名',數(shù)值) 自定義方法進(jìn)行數(shù)值修改千康。
若直接在子組件上進(jìn)行修改的話享幽，也就映照了官方的解釋
image.png
此處可以通過便捷的 .sync 方式進(jìn)行數(shù)據(jù)的雙向綁定（此處通過Element 的 dialog 彈框進(jìn)行舉例）
子組件：
通過計(jì)算屬性的形式，針對(duì) dialogVisible的改變拾弃，更新 dialog值桩。
this.$emit("update:dialog", val);
<template>
<div>
<el-dialog title="編輯" :visible.sync="dialogVisible" width="800px" center>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="toEditor()">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
dialog: { type: Boolean, default: false }
},
computed: {
dialogVisible: {
get() {
return this.dialog;
},
set(val) {
this.$emit("update:dialog", val);
}
}
},
methods:{
toEditor(){
this.dialogVisible = false
this.$message.success('編輯成功')
}
}
};
</script>
<style>
</style>
父組件：
:dialog.sync
<template>
<div class="app-content">
<!-- 編輯 -->
<editorDialog :dialog.sync="editor_dialog"></editorDialog>
</div>
</template>
<script>
import editorDialog from "./component/editorDialog";
export default {
components: {
editorDialog
},
data() {
return {
editor_dialog: false,
};
},
};
</script>
