Vue<实现父子组件间的相互传递>

前提：

父组件向子组件传值，可以通过 props ；若我们通过子组件去修改父组件的值，当然也可以通过 $emit('方法名',数值) 自定义方法进行数值修改。
若直接在子组件上进行修改的话，也就映照了官方的解释

此处可以通过便捷的 .sync 方式进行数据的双向绑定（此处通过Element 的 dialog 弹框进行举例）

子组件：

通过计算属性的形式，针对 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>