主页 / 问题 / 1421026
Accepted
MAX GOLD
Asked:2022-08-17 03:06:56 +0000 UTC2022-08-17 03:06:56 +0000 UTC

如何将您的指令移动到 Vue 3 中的另一个文件？

  • 772

如何将您的指令移动到 Vue 3 中的另一个文件？

app.directive('scroll-list', (el, binding) => {
        console.log(binding.value.color);
    })

vue.js vue3

1 个回答

  1. Best Answer

    自定义指令被定义为包含类似于组件处理程序的生命周期处理程序的对象。

    将指令的逻辑移动到单独的文件（将其形式化为命名对象导出）：

    // scrollList.js
export const scrollList = {
  mounted(el, binding, vnode, prevVnode) {
    console.log(binding.value.color);
  },
}

    然后，您可以将此指令（对象）导入所需的组件，如下所示：

    import { scrollList } from './scrollList'

export default {
  setup() {
    /*...*/
  },
  directives: {
    // включает v-scroll-list в шаблоне
    scrollList,
  }
}

    或全局注册：

    import { scrollList } from './scrollList'
const app = createApp({})

// сделать v-scroll-list пригодным для использования во всех компонентах
app.directive('scrolList', scrollList)


    // этот объект, который описывает функционал пользовательской директивы можно вынести
//  в отдельный файл и импортировать в нужное место в приложении
const scrollList = {
  mounted(el, binding, vnode, prevVnode) {
    console.log(binding.value.color);
  },
}

const app = Vue.createApp({
  // использование директивы только в текущем компоненте
  directives: {
    // включает v-scroll-list в шаблоне компонента
    scrollList,
  }
})

// глобальная регистрация директивы
// app.directive('scrollList', scrollList)

app.mount('#app')
    <script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div class="main" v-scroll-list="{ color: 'red' }"></div>
</div>

    • 2

相关问题