发射组件：is

Question

我正在构建一个仪表板应用程序，用户可以选择出现在某些位置的小部件。我这样做是利用

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

这一切都很好，但我希望用户能够编辑组件并将更改发送到父级。例如，通过编辑，组件1显示欢迎消息，用户可以更改该消息。

现在我有以下几点

仪表板vue

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

脚本中是计算的、挂载的等等，我认为这与问题无关。

由于Im使用组件：Im发现传递道具和发出更改很棘手。在我的商店里，我有两个组件的道具（标题

Emit也给我带来了一个问题。当然，我可以通过硬编码来发出对组件的调用，但是因为我使用了：它对我不起作用。

这里是什么工作，但我需要使它作为任何组件动态：是wan包含任何小部件。有什么想法吗？

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

或

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

我希望有这些组件，这样我就可以引入不同的关注点，让每个关注点都更像这样，其中“组件名称”可以用来填充：is、：props和@update:

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

Answer 1

您可以使用v-bind和v-on功能，并使用计算属性，就像您已经在做的那样。我会解释自己：

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

和写作一样：

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

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

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

模板：

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

JS：

Vue.component('greeting', {
    props: ['name'],
  template: '<h1>Welcome {{ name }} !</h1>',
  mounted () {
    setTimeout(() => {
        this.$emit('some-event')
    }, 2000)
  }
});

Vue.component('other-component', {
    template: '<h1>Welcome to Other Component</h1>'
})

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app',
  data: {
    componentToUse: 'greeting'
  },
  methods: {
    handleOtherComponentEvent () {
        console.log('Hello World from other component listener')
    },
    handleGreetingComponentEvent () {
        console.log('Hello World from greeting component event listener')
    }
  },
  computed: {
    listeners () {
        if (this.componentToUse === 'greeting') {
        return {
            'some-event': this.handleOtherComponentEvent
        }
      } else if (this.componentToUse === 'other-component') {
        return {
            'some-greeting-event': this.handleGreetingComponentEvent
        }
      }

      return {}
    },
    attributes () {
        if (this.componentToUse === 'greeting') {
        return {
            'name': 'Hammerbot'
        }
      }

      return {}
    }
  }
});