要素プラスに基づく 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>

<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>

<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>