Vue 3 中的 Vue.component 替代方案

Question

我正在使用 Vue 和 Laravel Mix。在 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 World”将替换为以下内容：

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

无法传递。

---

我的问题是：是否有任何替代 API 或解决方法来补偿

Vue.component()

的损失？

Answer 1

到目前为止，我只使用过 Vue3，但我从文档中了解到，Vue3 中的组件与 Vue2 中的组件没有太大不同。

尝试这个解决方案：

import { createApp } from 'vue';
import MyComponent from './MyComponent';

const app = createApp({});

app
   .component('MyComponent', MyComponent)
   .mount('#app');

您可以在 Vue3 文档中找到更多相关信息。

Answer 2

这是一篇很旧的帖子。虽然我不确定这是否是最佳实践，但为了克服这个问题，我所做的不是将值（直接从 Blade 模板）打印到主

App

组件，而是将值传递到目的地，或者子组件。通过组件树传递值并不总是最好的事情。

3. anyview.blade.php:
<div id='app'>
    <my-component message='{{$myMessage}}'></my-component>
    <my-other-component foo='{{$bar}}'></my-other-component>
</div>

其他任何代码基本保持不变。关键是将值传递给需要的组件。我做错的事情是尝试从 Blade 模板中的 PHP 变量将 props 值直接传递到最父级的 App 组件