Question

我正在构建一个仪表板应用程序，用户可以在其中选择出现在特定位置的小部件。我正在使用

<component :is="name-of-component">

一切正常，但是我希望用户能够编辑组件并将更改发送给父级。通过编辑，例如说1个组件显示欢迎消息，用户可以更改。

现在我有以下内容

Dashboard.vue

<template>
  <component :is="name-of-component"></component>
</template>
<script>
  data () {
    return {
      name-of-component: 'selected-component-name'
    }
  }
</script>

脚本中是计算的，装入的等，我认为与该问题无关。

因为我使用了组件：is我发现传递道具和发出更改很棘手。在我的商店中，我为阵列中的组件（标题和字幕）提供了2个道具。我可以对：props =“ welcomeMessage”进行硬编码，但由于我使用：is且窗口小部件的位置可以更改，因此我不想进行硬编码。

发射也对我造成了问题。当然，我可以通过对调用的硬编码来发出，但是由于Im使用：is对我不起作用。

这里有什么工作，但我需要使它动态化，因为任何组件都必须包含任何小部件。有什么想法吗？

<component 
  :is="welcomeMessage" 
  :props="dashboard.welcomeMessage" 
  @update-welcomeMessage="welcomeMessage(e)">
</component>

OR

<component 
  :is="busStops" 
  :props="dashboard.myBusStop" 
  @update-busStop="busStop(e)">
</component>

Id喜欢拥有组件，以便我可以处理不同的问题，并使每个问题都更像这样，其中可以使用“组件名称”来填充：is，：props和@update：< / p>

<component 
  :is="name-of-component" 
  :props="dashboard.name-of-component" 
  @update-name-of-component="name-of-component(e)">
</component>

Answer 1

您可以使用layer1_error = np.dot( w1, strippedlayer2delta)和v-bind功能，并像已经在使用计算属性一样使用它。我会自我解释：

v-on

与写作相同：

<some-component @some-event="doThis" foo="bar"></some-component>

这意味着您可以编写计算属性以计算要用于动态组件的侦听器和属性。

如果您愿意，我在jsFiddle上写了一个完整的示例：https://jsfiddle.net/tsc2pmrx/

模板：

<some-component v-bind="{foo: 'bar'}" v-on="{'some-event': doThis}"></some-component>

JS：

<div id="app">
  <component :is="componentToUse" v-on="listeners" v-bind="attributes"></component>
</div>

用组件：is发射

1 个答案: