使用 createApp 传递道具

Posted 2023-02-22

【中文标题】使用 createApp 传递道具

【英文标题】：Passing props using createApp

【发布时间】：2021-11-20 10:08:17

【问题描述】：

我在 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 函数中的组件？

【问题讨论】：

我只知道你在内部使用props vue 将数据从你的父母传递给你的孩子。在您的情况下，是否可以以不同的方式导入数据？也许来自脚本？

@wittgenstein 我将它与这样的选项 api 一起使用。所以这是可能的 - 但不知道如何使用组合 API 来做到这一点。

【参考方案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>

【讨论】：

我也试过这个，比如： props: ['id'], id: data.id 但它仍然未定义。

我已经更新了我的答案，向您展示了一个示例。似乎对我有用。

我更新了这个问题，我现在是如何尝试的。似乎很相似......唯一的区别是我传递给 createApp 的组件

等一下，让我创建一个工作示例..

非常感谢！最后确实是组件注册。 =)