Vue.js可以在Web组件内使用吗?

huangapple go评论82阅读模式
英文:

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

&lt;template&gt;
  &lt;div&gt;
    &lt;h1&gt;My Vue Web Component&lt;/h1&gt;
    &lt;div&gt;{{ msg }}&lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    props: [&#39;msg&#39;] 
  }
&lt;/script&gt;

This is main.js file

import Vue from &#39;vue&#39;;
import wrap from &#39;@vue/web-component-wrapper&#39;;
import MyWebComponent from &#39;./components/Component&#39;; //this is your component file

const WrappedElement = wrap(Vue, MyWebComponent);

window.customElements.define(&#39;my-web-component&#39;, WrappedElement);

For more information visit https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200

huangapple
  • 本文由 发表于 2020年1月6日 16:10:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/59608667.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定