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

Question

I want to create a list of similar components that will be added automatically.

Something like this:

Dynamic component rendering with Vue is easy, but there is a problem in communication between parent and child in these components. In the child is a button and when a user clicks on it, the counter in the parent should change.

Something like this example:

 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

You can get rid of the $emit altogether and use @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>