vue実装モードボックスの汎用書き方

elementコンポーネントのソースコードを見たところ,すべてのモードボックスの実装方法はほとんど悪くなく,主にvueのコンポーネント化における双方向バインドを用いていることが分かった.コード:

<template lang="html">
  <transition name="el-fade-in-linear">
    <div draggable="true" @drag="mouseDrag" @dragend="mouseDragend" :style="dialogStyle" class="g-dialog-wrapper" v-show="myVisible">
      <div class="g-dialog-header">
        <div class="left">
             
        div>
        <div class="right">
          <i class="g-times-icon fa fa-times" @click="myVisible=false" aria-hidden="true">i>
        div>
      div>
      <div class="g-dialog-container">

      div>
    div>
  transition>
template>

<script>
  export default {
    props: {
      visible: Boolean
    },
    created() {
    },
    data() {
      return {
        myVisible: this.visible,
    },
    computed: {},
    methods: {
    },
    components: {},
    watch: {
      myVisible: function (val) {
        this.$emit('update:visible', val)
      },
      visible: function (val) {
        this.myVisible = val
      }
    }
  }
script>

<style lang="css" scoped>
style>

上のコードの主な部分はwatchの中のコードで、傍受データの変化を実現し、タイムリーに更新します.そのため、使用時に便利になり、コンポーネントをcomponentに登録した後:

<g-key-dialog :visible.sync="keyDialogVisible"></g-key-dialog>

注意:syncを使用する必要があります.双方向にバインドできない場合は