バックエンドフロントエンドノート：vueの親コンポーネントと子コンポーネント間の双方向のデータバインディングの問題

最近、element-uiのDialogコンポーネントを使用して、それを2回目に独立したコンポーネントにカプセル化する場合、子コンポーネントは閉じたダイアログステータスを親コンポーネントに返す必要があります。これは、双方向のデータバインディングの問題を実現するためです。親コンポーネントと子コンポーネントの間。サンプルコードは次のとおりです。

親コンポーネント：

<template>
  <div>
    <el-button type="primary" @click="openDialog">点击打开Dialog</el-button>
    <childCompenent title="Dialog对话框" :openStatus="openStatus" @dialog="closeDialog"></childCompenent>
  </div>
</template>

<script>
import childCompenent from './ChildCompenent'
export default {
  data () {
    return {
      openStatus: false
    }
  },
  components: {
    childCompenent
  },
  methods: {
    openDialog () {
      this.openStatus = true
    },
    closeDialog (data) {
      // 子组件触发父组件事件,修改openStatus的值
      this.openStatus = data
    }
  }
}
</script>

サブコンポーネント：

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <span>Dialog对话框</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: String,
    openStatus: Boolean
  },
  data () {
    return {
      // dialogVisible变量缓存openStatus数据
      dialogVisible: this.openStatus
    }
  },
  // 监听父组件对props属性openStatus的修改,并同步导组件内的dialogVisible属性
  watch: {
    openStatus (val) {
      this.dialogVisible = val
    }
  },
  methods: {
    handleClose () {
      // 关闭对话框时向父组件发送事件通知
      this.$emit('dialog', false)
    }
  }
}
</script>

参照：https：//segmentfault.com/a/1190000011783590