Vue中的单向数据流原则详解

<!-- 子组件 -->
<template>
  <!-- elmentui 的 Dialog -->
  <el-dialog :title=title
             :visible="dialogVisible">
    <span slot="footer" class="dialog-footer">
    <el-button @click="handleCancel">取 消</el-button>
    <el-button type="primary" @click="">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  name: "MyDialog3",
  props: ['title', 'dialogVisible'],
  methods: {
    handleCancel() {
      this.dialogVisible = false;     // 这是错误的写法, 不能在子组件中直接修改props的值
    }
  }
}
</script>

<style scoped>

</style>

<template>
  <div>
    <el-button @click="btnClick">点我弹框</el-button>
    <MyDialog3
        :title="headerText"
        :dialog-visible="dialogShow">
    </MyDialog3>
  </div>
</template>

<script>
import MyDialog3 from "@/components/dialog3/MyDialog3";

export default {
  name: "MyDialog3Test",
  components: {MyDialog3},
  data() {
    return {
      headerText: '测试弹框',
      dialogShow: false,
    }
  },
  methods: {
    btnClick() {
      this.dialogShow = true;
    }
  }
}
</script>

<style scoped>

</style>