[英]Migrating Js plugins to Vue
So I have a PHP app that renders some HTML, to provide interactivity on the site we had some js plugins that would be instantiated using some selectors and do their job (generate forms, load videos, etc).所以我有一个渲染一些 HTML 的 PHP 应用程序,为了在网站上提供交互性,我们有一些 js 插件,这些插件将使用一些选择器进行实例化并完成它们的工作(生成表单、加载视频等)。
Now I am trying to move those plugins to Vue 3 but I have some issues on getting the right approach.现在我正在尝试将这些插件移至 Vue 3,但在获取正确方法方面存在一些问题。
My initial approach was to register my components and mount a single vue instance on a parent that would wrap around all the content on my site (Including statically generated HTML + my new vue components).我最初的方法是注册我的组件并在父级上挂载一个单独的 vue 实例,它将环绕我网站上的所有内容(包括静态生成的 HTML + 我的新 vue 组件)。 But this approach didn't work because vue will just remove everything inside that wrapper.
但是这种方法不起作用,因为 vue 只会删除该包装器中的所有内容。
The only way I was able to make my components work alongside my static HTML was by adding a wrapper element around my component and mounting a new Vue instance for each component I have on the page like so:我能够让我的组件与我的静态 HTML 一起工作的唯一方法是在我的组件周围添加一个包装元素并为我在页面上的每个组件安装一个新的 Vue 实例,如下所示:
<div data-vue-component="">
<foo-component/>
</div>
Is there a way to avoid doing this?有没有办法避免这样做? Ideally, I would prefer only having a single instance on the page and just using the components alongside my static HTML.
理想情况下,我希望页面上只有一个实例,并且只在我的静态 HTML 旁边使用这些组件。
So... This is really not an issue at all.所以……这根本不是问题。
The easy fix was to provide the el: '#selector'
property when creating the instance and removing the $mount('#selector')
call.简单的解决方法是在创建实例并删除
$mount('#selector')
调用时提供el: '#selector'
属性。
So my code became所以我的代码变成了
Vue.component('test-button', () => import('../vue-components/TestButton'))
Vue.component('test-component', () => import('../vue-components/TestComponent'))
const instance = new Vue({
el: '.wrap'
})
And now I am able to use the 2 test components without having to create a new instance for each component.现在我可以使用 2 个测试组件,而不必为每个组件创建一个新实例。
Since I don't know if a page has a plugin or not, I've created a class to lazy load Vue using dynamic imports:由于我不知道页面是否有插件,我创建了一个类来使用动态导入延迟加载 Vue:
export class VueInitializer {
static init () {
const vueComponents = document.querySelector('[data-vue-component]')
if (!vueComponents) {
return
}
const vue = () => import('vue')
vue().then((module) => {
const Vue = module.default
//lazy load la all components
Vue.component('test-button', () => import('../vue-components/TestButton'))
Vue.component('test-component', () => import('../vue-components/TestComponent'))
const instance = new Vue({
el: '.wrap'
})
})
}
} }
The bad part of this implementation is that you will need to add a data attribute to our components.这个实现的不好的部分是你需要向我们的组件添加一个数据属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.