1. パッケージドロワー: ドロワーコンポーネント

アイデア:

実際、主にスロットを使用して、親コンポーネントから渡されたテンプレートを受け取ります。親コンポーネントがコンポーネントを参照し、その中にフォームが渡され、子コンポーネントがフォームを表示し、ボタンが渡され、ボタンが表示されます。ここに公式文書があります。

上記は、テンプレートを子コンポーネントに渡す親コンポーネントです。以下のいくつかの質問を考えてみましょう。

1. 親コンポーネントのボタンをクリックして子コンポーネントをポップアップさせる方法。

2. 実際の開発では、プロジェクト内で共通のコンポーネントを使用する.コンポーネントヘッダーの内容が異なる、コンポーネントの幅が異なる、コンポーネントの多くの属性とイベントが異なる.動的にピンチする方法.

1つずつ解決:

最初に最初のものを解決します。親コンポーネントのボタンをクリックして子コンポーネントをポップアップさせる方法。

私の v-model によってバインドされたデータは子コンポーネントで定義され、親コンポーネントは子コンポーネントで定義されたイベントを使用したいので、vue3 の新しい属性「defineExpose」を使用できます。公式サイトには次のように書かれています。

拭きます！何を理解できますか？? ?

百度わかりました。つまり、vueファイルはデフォルトで閉じられており、他のvueファイルのメソッドを直接呼び出してはいけません.このメソッドは、コンポーネントで指定されたメソッドを公開でき、使用できます.

上記のコード:

1. 親コンポーネントコード:

<template>
  <div>
    <el-button type="primary" @click="open">抽屉</el-button>

    <drawer ref="drawerRef" title="抽屉头部" size="50%" @submit="submit" conText="父组件测                    
       试">
    </drawer>
  </div>
</template>


<script setup>
import { ref, reactive } from 'vue';
import drawer from './drawer.vue';

const drawerRef = ref(null)

const open = () => {
  drawerRef.value.open()
}
</script>

2. サブコンポーネントコード

<template>
    <div>
        <el-drawer v-model="drawer" :title="title" :direction="left" :size="size">
            <slot></slot>

            <el-button @click="submit">{
   
   { conText }}</el-button>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from "vue"
const drawer = ref(false)

const open = () => drawer.value = true
const close = () => drawer.value = false

defineExpose({
    open,
    close
})
</script>

上記のコードを説明すると、最初に子コンポーネントを見て、次に親コンポーネントを見てください。

1. サブコンポーネントは、開くための open と閉じるための close の 2 つのメソッドを定義します。drawer の v-model = true と false をそれぞれ設定します。

2. defineExposeApi を介して open メソッドと close メソッドを公開します。

3. 親コンポーネントで ref 属性を定義します。これを drawerRef 変数に割り当てると、drawerRef.value.open() を通じてこのイベントを取得できます。オープンイベントを記述して直接呼び出すだけです。

それはとても簡単です！! ! 言葉を失った、私は公式文書が何を言っているのか分からない。

しかし、最初の問題はここで解決されます。次に、2 番目の質問について考えます。

共有コンポーネントであるため、親コンポーネントが子コンポーネントを呼び出しています。子コンポーネントは、親コンポーネントごとに異なるヘッダー、バット、およびメソッドをどのように表示しますか。

defineProps: 子コンポーネントは、親コンポーネントから渡された値を受け取ります。

defineEmits: 子コンポーネントは、親コンポーネントから渡されたメソッドを受け取ります。

解けた解けたじゃないかちょっと突っ込んで

具体的には、element-plus の引き出しにはいくつかの属性があります。

title: 表示されるタイトル

modal: マスクレイヤーを表示するかどうか

direction: 開く方向

size: オープンサイズのデフォルトは 30% です

これらの v-bind バインディングを渡すと、サブコンポーネントは defineProps を通じてそれらを受け取ります。

これらのデータを割り当てるだけです

ボタンはドロワーに、メソッドは親コンポーネントに記述します。

親コンポーネントは、カスタムイベントを通じてそれを彼に渡します。

子コンポーネントは、defineEmits を介して親コンポーネントから渡されたメソッドを取得し、クリックされたときにこのメソッドを呼び出しても問題ありません。

この時点で、思考はすべて明確になり、心は明確になり、書き終わった後も同じです。ヘイヘイ

以下、すべてのコードに直接。

親コンポーネント

<template>
  <div>
    <el-button type="primary" @click="open">抽屉</el-button>

    <drawer ref="drawerRef" title="抽屉头部" size="50%" @submit="submit" conText="父组件测试">
      <el-color-picker v-model="color1" />
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </drawer>
  </div>
</template>


<script setup>
import { ref, reactive } from 'vue';
import drawer from './drawer.vue';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

const drawerRef = ref(null)
const color1 = ref('#369149')

const open = () => {
  drawerRef.value.open()
}

const submit = () => {
  console.log('这是在父组件定义的方法，子组件触发了');
}


</script>



<style scoped>
.read-the-docs {
  color: #888;
}
</style>

サブアセンブリ

<template>
    <div>
        <el-drawer v-model="drawer" :title="title" :direction="left" :size="size">
            <slot></slot>
            <el-button @click="submit">{
   
   { conText }}</el-button>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from "vue"
const drawer = ref(false)

const open = () => drawer.value = true
const close = () => drawer.value = false

const props = defineProps({
    title: String,
    size: {
        type: String,
        default: '45%'
    },
    conText: {
        type: String,
        default: '测试'
    }
})

const emit = defineEmits(['submit'])
const submit = () => emit('submit')

defineExpose({
    open,
    close
})

</script>

<style lang="scss" scoped></style>

エピローグ：

これらのことは大物から冷笑されるかもしれませんが、それに触れたばかりのXiaobaiにとっては、いくつかのアイデアが生まれるかもしれません。

Vue3 は element-ui-plus コンポーネントをカプセル化します

1. パッケージドロワー: ドロワーコンポーネント

おすすめ

Vue3 は element-ui-plus コンポーネントをカプセル化します

1. パッケージ ドロワー: ドロワー コンポーネント

おすすめ

1. パッケージドロワー: ドロワーコンポーネント