Menghantar data kepada komponen menggunakan arahan tersuai dalam Vue3: Panduan

Question

Saya mahu melaksanakan tingkah laku ini

<simple-component v-layer="'pizza'" />

Untuk menggunakan arahan tersuai, gunakan arahan tersebut dalam 'pizza' 传递给组件，并能够在我的 SimpleComponent.

Ideanya adalah untuk meletakkannya dalam skop ibu bapa atas (melalui v-slot ), ia adalah sekolah lama dan mungkin bukan cara terbaik untuk melakukannya, tetapi sintaksnya penting kepada pelanggan saya (lebih sedikit aksara yang dimasukkan di sini lebih baik).

Saya menemui isu github ini untuk Vue2 tetapi saya tidak pasti bagaimana untuk menjadikannya berfungsi untuk Vue3 atau pun sintaks (saya tahu ia tidak vNode.context 而是 binding.instance 现在，而且我们不需要 $set kerana Vue3 menggunakan proksi).

Dokumentasi tidak begitu membantu saya, dan memeriksa contoh dalam alat dev biasa tidak memberi saya sebarang petunjuk.

PS: Kita boleh melakukan hampir semua perkara dalam SimpleComponent itu sendiri, cuma kita tidak perlu melihatnya dari luar komponen.

Answer 1

Penafian

Ini agak meretas, dan mungkin bukan cara yang betul untuk melakukannya, kerana ia bertentangan dengan API Vue (yang jelas menunjukkan bahawa ia adalah baca sahaja), jadi ya: anda mungkin tidak mahu menggunakan dengan cara itu.

Selain itu, arahan digunakan untuk pengubahsuaian elemen DOM, bukannya mencapai dan menukar keadaan Vue di tempat lain. Keperluan pasukan saya sangat sukar.
Jangan tiru di rumah, sebaliknya gunakan prop biasa.

---

Sementara itu, jika anda berbuat demikian, inilah perkara yang perlu dilakukan.

page.vue

sssccc

SimpleDiv.vue

sssccc