将道具动态传递给VueJS中的动态组件

Posted 2023-02-23

【中文标题】将道具动态传递给VueJS中的动态组件

【英文标题】：Passing props dynamically to dynamic component in VueJS

【发布时间】：2021-07-08 02:20:25

【问题描述】：

我有一个动态视图：

<div id="myview">
  <div :is="currentComponent"></div>
</div>

与关联的 Vue 实例：

new Vue (
  data: function () 
    return 
      currentComponent: 'myComponent',
    
  ,
).$mount('#myview');

这允许我动态更改我的组件。

就我而言，我有三个不同的组件：myComponent、myComponent1 和 myComponent2。我像这样在它们之间切换：

Vue.component('myComponent', 
  template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"

现在，我想将道具传递给myComponent1。

当我将组件类型更改为myComponent1 时，如何传递这些道具？

【问题讨论】：

您通过元素 propName="propValue" 上的属性传递道具。这是你的问题吗？

我不能，因为我从不写 <myComponent1 propName="propValue"> 我用 $parent.currentComponent = componentName 以编程方式更改组件

是的，但你写的是<div :is="currentComponent"></div>。这就是你要添加属性的地方。

是的，但是 props 取决于组件。例如，myComponent1 带道具，myComponent2 不带道具

【参考方案1】：

要动态传递道具，您可以将v-bind 指令添加到您的动态组件并传递一个包含您的道具名称和值的对象：

所以你的动态组件应该是这样的：

<component :is="currentComponent" v-bind="currentProperties"></component>

并且在您的 Vue 实例中，currentProperties 可以根据当前组件进行更改：

data: function () 
  return 
    currentComponent: 'myComponent',
  
,
computed: 
  currentProperties: function() 
    if (this.currentComponent === 'myComponent') 
      return  foo: 'bar' 
    
  
   

所以现在，当currentComponent 为myComponent 时，它的foo 属性将等于'bar'。如果不是，则不会传递任何属性。

【讨论】：

为什么这对我不起作用？它适用于第一个组件，但在我更改“currentComponent”后，我得到一个“e.currentProperties”在子组件上未定义。

@RicardoVigatti，没有看到你的任何代码，很难知道

嘿，如果我想在 <component>(here)</component> 中添加一些内容。这可能吗？

@FelipeMorales，是的，你只需要为你动态渲染的每个组件定义一个默认的<slot>。 vuejs.org/v2/guide/components-slots.html

风格指南说道具名称应该尽可能详细。这种方式打破了规则。这也是我使用的，但我正在寻找更好的解决方案。

【参考方案2】：

您也可以不使用计算属性并内联对象。

<div v-bind=" id: someProp, 'other-attr': otherProp "></div>

显示在 V-Bind 的文档中 - https://vuejs.org/v2/api/#v-bind

【参考方案3】：

你可以像...一样构建它

comp:  component: 'ComponentName', props:  square: true, outlined: true, dense: true , model: 'form.bar' 
     

<component :is="comp.component" v-bind="...comp.props" v-model="comp.model"/>

【参考方案4】：

如果你已经通过 require 导入了代码

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')

并初始化数据实例如下

data: function () 
            return 
                currentView: patientDetailsEdit,
            

如果您的组件已分配，您也可以通过 name 属性引用该组件

currentProperties: function() 
                if (this.currentView.name === 'Personal-Details-Edit') 
                    return  mode: 'create' 
                
            

【参考方案5】：

我有同样的挑战，由以下解决：

<component :is="currentComponent" v-bind="resetProps"> 
    title 
</component>

脚本是

export default  
  …
  props:['title'],
  data() 
    return 
      currentComponent: 'component-name',
    
  ,
  computed: 
    resetProps() 
      return  ...this.$attrs ;
    ,

<div
    :color="'error'"
    :onClick="handleOnclick"
    :title="'Title'"
/>

我来自 reactjs，我发现这解决了我的问题