Maison  >  Questions et réponses  >  le corps du texte

Comment créer des fonctions personnalisées pour Vue JS telles que le hook créé() ?

<p>Comment dois-je créer un plugin qui ajoute une fonction nommée <code>struct</code> (comme un hook <code>created()</code>) à tous les composants ? </p> <p>De plus, je souhaite que mon plugin ait accès à la valeur de retour <code>structure</code> </p> <pre class="brush:js;toolbar:false;">export par défaut { structure() { // Accès au contexte } } ≪/pré> <p>Je dois mentionner que j'utilise Inertia JS. </p>
P粉512729862P粉512729862434 Il y a quelques jours429

répondre à tous(1)je répondrai

  • P粉848442185

    P粉8484421852023-09-05 00:31:53

    Vous pouvez utiliser Vue Mixins ou Composables.

    Les deux peuvent vous fournir des fonctions et des variables partagées. Mais je ne sais pas comment définir de nouveaux hooks dans Vue, comme create() . Je dois moi-même démarrer votre fonction danscreated(). Bien sûr, vous pouvez utiliser des mixins pour remplacer les hooks Vue existants.

    Mixin est très pratique, mais n'est plus recommandé

    Il n'y a pas de created() dans l'API Composition created() ,所以你必须使用onBeforeMount()onMounted(), vous devez donc utiliser onBeforeMount() ou onMounted()

    Voici un exemple très basique utilisant les deux techniques

    const { createApp, ref, onBeforeMount } = Vue;
    
    const myMixin = {
      created() {
        console.log('myMixin: created()')
      }
    }
    
    const myComposable = () => {
        onBeforeMount(() => {
           console.log('myComposable: onBeforeMount()')    
        })
        const myFunction = () => console.log('myFunction()')    
        return { myFunction }
    }
    
    const App = {
      setup() {
        const { myFunction } = myComposable()
        return  { myFunction }
      },
      mixins: [myMixin]
    }
    
    const app = createApp(App)
    app.mount('#app')
    <div id="app">
      <button @click="myFunction()">myFunction()</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

    répondre
    0
  • Annulerrépondre