在 Vue 中动态添加带有事件的不同组件

Question

我想创建一个自动添加的类似组件列表。

类似这样的：

用 Vue 进行动态组件渲染很简单，但是在这些组件中，父子之间的通信存在问题。 在子元素中是一个按钮，当用户点击它时，父元素中的计数器应该会发生变化。

类似这个例子：

const Reusable = {
  template: '<div>{{ name }} {{ bar }}<button @click="doClick">Click</button></div>',
  
  props: {
    name: {
      type: String
    }
  },
  methods: {
    doClick() {
        console.log("clicked");
      this.$emit("clicked");
    }
  },
  data () {
    return {
      bar: 'Bar'
    }
  }
}

const App = new Vue({
  el: '#app',
  
  data: {
    items: [],
    value: 0,
  },
  
  methods: {
    onClick() { //I want to run this method 
      console.log("onClick method");
      this.value = this.value + 1;
    },
    addComponent () {
      const renderComponent = {
        render (h) {         
          return h(Reusable, {
            class: ['foo'],
            
            props: { 
              name: 'Foo'
            },
            on: {
                clicked() {
                console.log("on clicked in Reusable");
                this.onClick(); //why this method cannot be called?

              },
            },
/*          events: {
              clicked: this.onClick()
            } */
          })
        }
      }
      
      this.items.push(renderComponent)      
    }
  }
});

#app {
  padding: 5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component v-for="item in items" ref="itemRefs" :is="item" :key="item.name"></component>
  <div> {{value}} </div>
  <button @click="addComponent">Add Component</button>
</div>

Answer 1

您可以完全摆脱$emit 并使用@click.native="value++"：

const Reusable = {
  template: '<div>{{ name }} {{ bar }}<button @click="doClick">Click</button></div>',

  props: {
    name: {
      type: String
    }
  },
  methods: {
    doClick() {
      console.log("clicked");
      this.bar = 'Baz';
    }
  },
  data() {
    return {
      bar: 'Bar'
    }
  }
}

const App = new Vue({
  el: '#app',

  data: {
    items: [],
    value: 0,
  },

  methods: {
    addComponent() {
      const renderComponent = {
        render(h) {
          return h(Reusable, {
            class: ['foo'],

            props: {
              name: 'Foo'
            },
          })
        }
      }

      this.items.push(renderComponent)
    }
  }
});

#app {
  padding: 5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component v-for="item in items" ref="itemRefs" :is="item" :key="item.name" @click.native="value++"></component>
  <div> {{value}} </div>
  <button @click="addComponent">Add Component</button>
</div>