英文:
Can vuejs be used inside webcomponent?
问题
VueJS能够用于在web组件内部编写行为吗？我的意思是：如果VueJS库作为脚本引用加载，那么它是否可以像在普通HTML页面中一样在web组件的定义内部使用？
英文:
Can VueJS be used to code behavior inside a web component ? I mean: if vuejs library is loaded as script reference can it then be used as in a normal html page but inside the definition of a web component ?
答案1
得分: 2
是的，你可以将Vue.js包装在一个Web组件中，你只需要.vue文件和来自Vue.js的辅助库，称为https://github.com/vuejs/vue-web-component-wrapper。
使用它非常简单！！！
这是Component.vue文件
<template>
<div>
<h1>我的Vue Web组件</h1>
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
props: ['msg']
}
</script>
这是main.js文件
import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import MyWebComponent from './components/Component'; //这是你的组件文件
const WrappedElement = wrap(Vue, MyWebComponent);
window.customElements.define('my-web-component', WrappedElement);
欲了解更多信息，请访问https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200。
英文:
Yes you can wrap vuejs inside a web component you just need .vue files and a helper library from vuejs called https://github.com/vuejs/vue-web-component-wrapper
It's extremely simple to use it!!!
This is the Component.vue file
<template>
<div>
<h1>My Vue Web Component</h1>
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
props: ['msg']
}
</script>
This is main.js file
import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import MyWebComponent from './components/Component'; //this is your component file
const WrappedElement = wrap(Vue, MyWebComponent);
window.customElements.define('my-web-component', WrappedElement);
For more information visit https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论