如何为Vue JS创建自定义函数,如created()钩子?

0md85ypi  于 2023-03-09  发布在  Vue.js
关注(0)|答案(1)|浏览(120)

我应该如何创建一个插件,添加一个函数命名为structurecreated()挂钩到所有组件?
我也希望我的插件有访问structure返回值。

export default {
   structure() {
       // Access to context
   }
}

我不得不提我用的是惯性JS。

jv2fixgn

jv2fixgn1#

您可以使用Vue混合或合成。
两个都可以提供一些共享的函数和变量,但是我不知道如何在Vue中定义像created()这样的新钩子,我必须自己在created()中启动你的函数,当然,你可以用Mixin覆盖现有的Vue钩子。
Mixin非常方便,但不再推荐
Composition API中没有created(),因此必须使用onBeforeMount()onMounted()
下面是使用这两种技术的一个非常基本的示例

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>

相关问题