要素プラスに基づく vue のコンポーネントの二次カプセル化の詳細な例

この記事では、vue に関する関連知識を提供し、主に要素プラスに基づく vue3 コンポーネントの二次カプセル化データの双方向バインディングに関する関連内容を紹介します。現在のビジネスの迅速な構築を容易にするために、Element-plus に基づいて独自にカスタマイズされたコンポーネントの一部をカプセル化しています。一緒に見てみましょう。皆様のお役に立てれば幸いです。

[関連する推奨事項: javascript ビデオ チュートリアル、vue.js チュートリアル]

要素に基づく-さらに、カプセル化された二次データの双方向バインディング

実際の開発では、現在のビジネスの迅速な構築を促進するために、要素プラスに基づいて独自にカスタマイズしたコンポーネントの一部をカプセル化する必要があることがよくあります。 vue2.0 では、親子コンポーネント データの双方向バインディングは通常、props: value.sync に値を渡し、それを子コンポーネント this.$emit("update:value", value) で使用することによって行われます。 )、vue3 で同様の親子コンポーネントの双方向バインディングを実装するにはどうすればよいですか?

vue2 では、データの応答性は Object.defineProperty オブジェクトに基づくデータの双方向バインディングです。このハイジャック パブリッシュ/サブスクライブ モードでは、オブジェクトや配列などの複雑なタイプのデータをうまく検出できません。 vue3 データの応答性はプロキシの set メソッドと get メソッドに基づいており、Object.defineProperty のハイジャックと比較すると、プロキシ メソッドはよりエレガントです。

具体的な実装アイデアは次のとおりです。

フォームのラベルと、対応するセレクターおよび入力ボックス

効果のプレビュー

el-input サブコンポーネントのカプセル化baseInput.vue

<template>
  <div>
    <div>{{ props.blockName }}</div>
    <el-input></el-input>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  blockName: {
    type: String,
    default: &#39;&#39;
  },
  value: {
    type: String,
    default: &#39;&#39;
  }
})
const emits = defineEmits([&#39;update:value&#39;])
// 通过重写计算属性的set和get方法，将计算属性的结果绑定在输入框的model中
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits(&#39;update:value&#39;, val)
  }
})
</script>

el-input サブコンポーネントのカプセル化select subcomponent baseSelect.vue

<template>
  <div>
    <div>{{ props.blockName }}</div>
    <el-select>
      <el-option></el-option>
    </el-select>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  blockName: {
    type: String,
    default: &#39;&#39;
  },
  value: {
    type: String,
    default: &#39;&#39;
  },
  placeholder: {
    type: String,
    default: &#39;请选择&#39;
  },
  options: {
    type: Array,
    default() {
      return [{ value: &#39;&#39;, label: &#39;&#39; }]
    }
  },
  // 一下三个属性配合多选使用
  multiple: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: false
  },
  allowCreate: {
    type: Boolean,
    default: false
  }
})
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits(&#39;update:value&#39;, val)
  }
})
const emits = defineEmits([&#39;update:value&#39;])
</script>

他のコンポーネントの呼び出し

<baseinput></baseinput>
<baseselect></baseselect>

手順

計算セットと親コンポーネントと子コンポーネントの双方向バインディングを使用すると、子コンポーネントが親コンポーネントの props を変更できないという事実を心配する必要はなくなります。他の要素コンポーネントの一般的な実装アイデアは次のとおりです。同じ。

基本ダイアログ ポップアップ ボックス

el-dialog サブコンポーネントのカプセル化baseDialog.vue

<template>
  <div>
    <el-dialog>
      <div>{{props.title}}</div>
      <slot></slot>
      <template>
        <span>
          <button>取消</button>
          <button>确定</button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  title: {
   type: String,
   default:&#39;&#39;
  },
  isShow: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits([&#39;update:isShow&#39;])
const handlerCancer = () => {
  emits(&#39;update:isShow&#39;, false)
}
const handlerSubmit = () => {
  // dialog 点击确定按钮之前处理相关业务逻辑
  emits(&#39;update:isShow&#39;, false)
}
const getShow = computed({
  get: () => props.isShow,
  set: (val) => {
    emits(&#39;update:isShow&#39;, val)
  }
})
</script>

その他コンポーネント呼び出し

<basedialog>
   <div>对应的插槽内容</div>
</basedialog>

Notes

v-model双方向バインディングのデフォルトのプロパティ名はvalueです。ダイアログのようなバインディングはisShowです。v-の後に双方向バインディングを宣言する必要があります。モデル。指定された props パラメータ名は v-model:isShow です。input や select などの入力ボックスはデフォルトで value にバインドされているため、無視できます。他の値 (つまり、value 以外の他のパラメーター値) をバインドする場合は、v-model:isShow ステートメント

[関連する推奨事項: javascript ビデオ チュートリアル 、vue.js チュートリアル ]

以上が要素プラスに基づく vue のコンポーネントの二次カプセル化の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。