使用 createApp 传递道具

Question

我在 Rails 应用程序上使用 Vue3，并且难以使用组合 API 传递道具：

导轨部分：

<% props = {
    id: @estimate.document_no_f
  }.to_json
%>

<div id="invoice_app" data="<%= props %>"></div>

main.js

const element = document.getElementById("invoice_app")
const data = JSON.parse(element?.getAttribute('data') || '')

console.log(data); <-- {id: 'A-00014'}
if (element != null) {
    const app = createApp(
    DragDropZone,              <-- Component
    {
      props: ['id']
    },
    {
      id: data.id
    }
    ).mount('#invoice_app');
}

DragDropZone 组件：

props: {
    id: String,
},
setup(props) {
    console.log(props); <- undefined

如何正确地将 props 传递给 createApp 函数中的组件？

Answer 1

您已将DragDropZone 作为第一个参数传递给createApp 方法，这是错误的。第一个参数是props，第二个是你的prop 数据。组件需要单独注册，如下所示。您可以参考component registration页面了解更多关于vue3中的组件注册

遇到无法在子组件中接收道具的问题，您需要先将道具传递给子组件，以便在composition api中获取它们。

例如。 <drap-drop-zone :id="this.id"></drap-drop-zone>

只有这样你才能在子组件中得到这个：

setup(props){ console.log(props); }

因此更正以下行：

<div id="invoice_app" data="<%= props %>"></div>

至此：

<div id="invoice_app">
   <drap-drop-zone :id="this.id"></drap-drop-zone>
</div>

示例实现

const data = {
  id: 'A-00014'
};

const app = Vue.createApp({ props: ["id"],}, data);

app.component('drap-drop-zone', {
  template: `
    <div>
      Output from drap-drop-zone: {{ this.id }}
   </div>
  `,
  props: {
    id: String
  },
  setup(props){
    console.log(props);
  }
});


/**
// or require it from a file
import drapDrop from '/../.../DragDropZone.vue';
app.component('drap-drop-zone', drapDrop);
**/

app.mount("#app");

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <drap-drop-zone :id="this.id"></drap-drop-zone>
</div>