使用 createApp 传递道具

Question

我在 Rails 应用程序上使用 Vue3 并努力使用组合传递道具 api:

Rails 部分：

<% 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 method, which is wrong. The first argument is props & second is your prop data. Components need to be registered separately, like I've shown below. You can refer to 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>

使用 createApp 传递道具

Passing props using createApp

vue.js

vue-props

vuejs3

实施示例