Rujukan templat Vue 3 dalam kompos

Question

Saya ingin menukar daripada API pilihan kepada API komposisi dan menggunakan bahan boleh gubah dan bukannya campuran. Setakat ini saya telah menggunakan campuran global dengan sifat yang dikira seperti ini:

// globalMixin.js

 computed: {
    myAlert() {
        return this.$refs.myAlertDiv;
    }
 }

Kemudian saya menggunakan mixin ini semasa mencipta aplikasi:

// MyApp.js

const MyApp = {
   mixins: [globalMixin]
...
}

myAlert menjadi harta pengiraan MyApp dan saya boleh menggunakannya tanpa mengisytiharkannya terus di dalam harta MyApp.

Sekarang saya ingin mencapai hasil yang sama menggunakan komposit, katakan saya mempunyai komponen yang mengimport bahan komposit:

// App.vue

<script setup>
import { useGlobalComposable} from './globalComposable.js';

const globalComposable = useGlobalComposable();

onMounted(() => {

// should work without declaring myAlert inside App.vue
console.log(globalComposable.myAlert);
})
...
</script>

Boleh tak? Jika ya, bagaimanakah saya harus mengisytiharkan rujukan templat myAlert dalam composable?

Answer 1

useGlobalComposable 函数应返回 myAlert anda, seperti yang ditunjukkan di bawah:

const useGlobalComposable = function() { 
  
   const myAlertDiv = ....

   const myAlert = computed(() => {
        return myAlertDiv;
    });

   return {myAlert}
  }

Kemudian anda boleh mengisytiharkan myAlert dalam blok tetapan

const { myAlert } = useComposable();   
 return { myAlert }

Sila ambil perhatian bahawa mixin 中的 this.$refs 不能直接与 Composition API 一起使用。如果您创建组件，则可以使用 this mengakses sifat dan kaedah komponen.

Ini adalah artikel tentang menggunakan refs dengan API Komposisi.

Contoh kerja yang sangat mudah menggunakan kompos dalam 设置:

 const { ref, reactive, createApp } = Vue;
 
 const useComposable = function() { 
  const test = ref(1);
  return { test }; 
 }
 
 const App = { 
   setup() {    
      const { test } = useComposable();   
      return { test }
   }
}
 
 const app = createApp(App)
 app.mount('#app')

<div id="app">
  <div>Test: {{ test }}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>