要素UIポップアップコンポーネントをカプセル化する手順

<!-- 詳細ダイアログ.vue html -->
<テンプレート>
 <el-dialog title="タイトル" :visible.sync="表示" width="720px" >
  <p>ポップアップコンテンツ</p>
 </el-ダイアログ>
</テンプレート>

// 詳細ダイアログ.vue.js
<スクリプト>
 小道具: {
  見える：
   タイプ: ブール値、
   デフォルト: false
  }
 }
</スクリプト>

<!-- 詳細ダイアログ.vue html -->
<テンプレート>
 <el-dialog title="タイトル" :visible.sync="innerVisible" width="720px" >
  <p>ポップアップコンテンツ</p>
 </el-ダイアログ>
</テンプレート>

// 詳細ダイアログ.vue.js
<スクリプト>
エクスポートデフォルト{
 小道具: {
  見える：
   タイプ: ブール値、
   デフォルト: false
  }
 },
 計算: {
  内部表示: {
   取得: 関数() {
    this.visible を返す
   },
   設定: 関数(val) {
    this.$emit('update:visible', val)
   }
  }
 }
}
</スクリプト>

<!-- father.vue html -->
<詳細ダイアログ:visible.sync="詳細表示" />

// 詳細ダイアログ.vue.js
<スクリプト>
エクスポートデフォルト{
 モデル： {
  prop: 'visible', // v-model にバインドされた props 名を変更します event: 'toggle' // v-model にバインドされたカスタム イベント名を変更します },
 小道具: {
  見える：
   タイプ: ブール値、
   デフォルト: false
  }
 },
 計算: {
  内部表示: {
   取得: 関数() {
    this.visible を返す
   },
   設定: 関数(val) {
    this.$emit('update:toggle', val)
   }
  }
 }
}
</スクリプト>

<!-- father.vue html -->
<詳細ダイアログ v-model="詳細表示可能" />

// vModelDialog.js
エクスポートデフォルト{
 モデル： {
  プロパティ: '表示'、
  イベント: 'トグル'
 },
 小道具: {
  見える：
   タイプ: ブール値、
   デフォルト: () => {
    偽を返す
   }
  }
 },
 計算: {
  内部表示: {
   取得: 関数() {
    this.visible を返す
   },
   設定: 関数(val) {
    this.$emit('toggle', val)
   }
  }
 }
}

// 詳細ダイアログ.vue js
<スクリプト>
'./vModelDialog.js' から vModelDialog をインポートします。
エクスポートデフォルト{
 ミックスイン: [vModelDialog],
}
</スクリプト>