Vue 3中的Vue.component替代方案
Vue 3中的Vue.component替代方案
提问于 2022-03-23 15:36:08
我在用Vue和Laravel。在Vue版本2中，我能够这样做：
1. resources/js/app.js:
import Vue from 'vue';
import MyComponent from './MyComponent';
Vue.component('my-component', MyComponent);2. resources/js/MyComponent.vue:
<template>
<p>{{message}}</p>
</template>
<script>
export default {
name: "MyComponent",
props: ['message']
}
</script>按照这份Vue 2文件的指示。我知道这不是最佳实践，但这是我必须方便地将数据从Laravel的Blade template传递到组件的唯一方法，如下所示：
3. anyview.blade.php:
<my-component :message='message' id='app'></my-component>
<script src='public/js/app.js'><script> //include compiled resources/js/app.js
<script>
let app = new Vue({
el: '#app',
data() {
return {
message: 'Hello World';
}
}
})
</script>在实际情况下，“Hello”将被替换为以下内容：
message: {{$myMessaGe}}但是由于Vue 3，Vue.component不再是一件事，因为Vue对象不是默认的导出。
这个工作流程(1-2-3)是无缝的，因此返回Vue2是最后一个不愉快的选择:(
我已经尝试过了，只是用新的Vue.component来改变createApp
4. resources/js/app.js:
import { createApp } from 'vue';
import MyComponent from './MyComponent';
createApp({
components: {
MyComponent,
}
}).mount('#app');但是，它没有将MyComponent添加到当前实例，而是创建了如下所示的新实例--这意味着message无法传递。
我的问题是：Vue.component() 是否有其他的API或解决办法来补偿的损失？
Stack Overflow用户
发布于 2022-03-23 17:39:30
到目前为止，我只使用过Vue3，但是我从文档中了解到，Vue3中的组件与Vue2中的组件并没有太大的不同。
试试这个解决方案：
import { createApp } from 'vue';
import MyComponent from './MyComponent';
const app = createApp({});
app
.component('MyComponent', MyComponent)
.mount('#app');您可以在Vue3文档中找到更多关于这一点的信息。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71589990
复制相关文章
相似问题
腾讯云开发者
