<p><br /></p><h2>Situasi</h2> <p>Saya cuba menggunakan API pilihan Vue untuk menyediakan dan menyuntik kefungsian supaya komponen <code>header.vue</code> dapat memberikan data kepada <code>container-nav.vue</code> ; komponen ( Lihat hierarki komponen). Walau bagaimanapun, apabila data disuntik, ia tidak ditentukan pada beban awal. </p> <p><strong>Hierarki komponen semasa: </strong></p> <ul> <li>header.vue > header-nav-menu.vue > </ul> <h1>Percubaan 1 - header.vue (datuk nenek)</h1> <p>Dalam komponen ini saya mendapat rentetan <code>'/'</code> di dalam <code>Provide() {}</code> </p> <pre class="brush:php;toolbar:false;">import { defineComponent } daripada 'vue' import parentStore dari '@/store' eksport lalai defineComponent({ persediaan() { // Seharusnya tidak mempunyai akses kepada this.navHome -> console.log("1. Persediaan panggilan dalam Pengepala") const storeCommon = parentStore() pulangkan { storeCommon } }, beforeCreate() { // Seharusnya tidak mempunyai akses kepada this.navHome -> console.log("2. Memanggil sebelumCreate dalam Pengepala") }, sediakan() { console.log("3. Panggilan disediakan dalam Pengepala") kembali { navHome: this.storeCommon.textualData[0]?.navigation.links.home } }, dicipta() { // Harus mempunyai akses kepada this.navHome -> console.log("9. Memanggil beforeCreate dalam Container Nav: ", this.$refs.navHome) }, dipasang() { // Harus mempunyai akses kepada this.navHome -> console.log("8. Memanggil beforeCreate dalam Container Nav: ", this.$refs.navHome) } })</pre> <h1>Cuba 1 - container-nav.vue (kanak-kanak)</h1> <p>Dalam komponen ini, saya menyuntik <code>navHome</code> yang disediakan oleh komponen <code>header.vue</code></p> <pre class="brush:php;toolbar:false;">import { defineComponent } daripada 'vue' eksport lalai defineComponent({ inject: [ 'navHome' ], persediaan() { // Seharusnya tidak mempunyai akses kepada this.navHome -> tidak ditentukan (dimuatkan sebelum API pilihan) console.log("4. Persediaan panggilan dalam Container Nav") }, beforeCreate() { // Seharusnya tidak mempunyai akses kepada this.navHome -> tidak ditentukan (dimuatkan sebelum API pilihan) console.log("5. Memanggil sebelumCreate dalam Container Nav") }, dicipta() { // Harus mempunyai akses kepada this.navHome -> '/' (dimuatkan selepas API pilihan) console.log("6. Memanggil beforeCreate dalam Container Nav: ", this.$refs.navHome) }, dipasang() { // Harus mempunyai akses kepada this.navHome -> '/' (dimuatkan selepas API pilihan) console.log("7. Memanggil beforeCreate dalam Container Nav: ", this.$refs.navHome) } })</pre> <h1>尝试 1 - 测试</h1> <p>使用 console.logs 运行以下代码会产生以下结果：</p> <pre class="brush:php;toolbar:false;">1. Persediaan panggilan dalam Pengepala 2. Memanggil beforeCreate dalam Pengepala: undefined -> Betul 3. Memanggil Sediakan dalam Pengepala 4. Persediaan panggilan dalam Container Nav 5. Memanggil beforeCreate in Container Nav: undefined -> Betul 6. Panggilan dibuat dalam Container Nav: undefined -> Tidak betul (sepatutnya '/') 7. Panggilan dipasang dalam Container Nav: undefined -> Tidak betul (sepatutnya '/') 8. Panggilan dipasang dalam Pengepala: undefined -> Tidak betul (sepatutnya '/') 9. Panggilan dibuat dalam Pengepala: undefined -> Tidak betul (sepatutnya '/')</pre> <hr /> <h1>尝试 2 - header.vue（祖父母）</h1> <p>使用与之前相同的代码和选项 API，除了使用 <code>setup</code> 和 <kod>berikan</kod>。</p> <pre class="brush:php;toolbar:false;">import { defineComponent, sediakan } daripada 'vue' import parentStore dari '@/store' persediaan() { // 1. Cuba cara ini const navLinkHome = parentStore().getTextualData[0]?.navigation.links.home const navHome = menyediakan('navHome', navLinkHome) // 2. Cuba cara ini const navHome = menyediakan('navHome', parentStore().getTextualData[0]?.navigation.links.home) kembali { // 1 & 2 navHome // Dan juga dengan cara ini navHome: provide('navHome', parentStore().getTextualData[0]?.navigation.links.home) } }</pre> <h1>尝试 2 - container-nav.vue（子级）</h1> <pre class="brush:php;toolbar:false;">import { defineComponent, inject } daripada 'vue' persediaan() { const navHome = inject('navHome') kembali { navHome // Cuba ini juga, tetapi sama seperti di atas hanya lebih lama navHome: navHome } }</pre> <h1>尝试 2 - 测试</h1> <p>使用 console.logs 运行以下代码会产生以下结果：</p> <pre class="brush:php;toolbar:false;">1. Persediaan panggilan dalam Pengepala 2. Memanggil beforeCreate dalam Pengepala: undefined -> Betul 3. Persediaan panggilan dalam Container Nav 4. Memanggil beforeCreate dalam Container Nav: undefined -> Betul 5. Panggilan dibuat dalam Container Nav: undefined -> Tidak betul (sepatutnya '/') 6. Panggilan dipasang dalam Container Nav: undefined -> Tidak betul (sepatutnya '/') 7. Panggilan dipasang dalam Pengepala: undefined -> Tidak betul (sepatutnya '/') 8. Panggilan dibuat dalam Pengepala: undefined -> Tidak betul (sepatutnya '/')</pre> <h2>混乱</h2> <ul> <li><p>首先，我注意到在 <kod>header.vue</code> 中使用 <kod>provide() {}</code> API Pilihan 时，并尝试引用 <kod>navHome</code>。我无法在创建或安装的方法中使用 <code>hot 。我会收到一条错误消息，说它在 <kod>CreateComponentPublicInstance</code> 类型上不存在。为了解决这个问题，我改为使用 <kod>ini.$refs.navHome</code> - 甚至不确定这是否是正确的做法。</p> </li> <li><p>其次，当在 <kod>container-nav.vue</code> 组件中使用 <kod>inject: [ 'navHome' ]</code> 时，我无法使用 <kod>this.navHome</code> 访问它。Sekali lagi, saya hanya boleh mengaksesnya menggunakan <code>this.$refs.navHome</code>. </p> </li> </ul> <p>Tetapi. </p> <ul> <li>Apabila menggunakan Provide dalam kaedah persediaan <code>header.vue</code> dan Inject dalam kaedah persediaan <code>container-nav.vue</code>, saya boleh menggunakan < ;code> ;this.navHome</code> mengakses <code>navHome</code> Tidak pasti mengapa ia melakukan ini. </li> </ul><p><br /></p>

const navLinkHome = computed(()=> parentStore().getTextualData[0]?.navigation.links.home)
const navHome = provide('navHome', navLinkHome)