与动态创建的组件进行父子通信

Question

我正在尝试使用 VUE 和 LARAVEL 构建一个表单，用户可以在其中动态构建参与者组。我决定解决这个问题，让用户为每个组生成一个 table。在每个 table she/he 中可以添加和删除行。

到此为止：

家长 HTML:

<div class="form-group col-md-12 blocco-partecipante" v-for="participant_block in participant_blocks">    
  <mimi-table :operators='operators' :participant_block='participant_block' @removeBlockParticipant="removeBlockParticipant" @makeBlockWinner="makeBlockWinner"></mimi-table>   
</div>

STYLE.JS

Vue.component('mimi-table', {

props: ['operators', 'participant_block'],

template: '\
    <div>\
      <div class="row">\
        <div class="col-xs-6"><button type="button" class="btn btn-default" @click.prevent="makeBlockWinner">Winner</button></div>\
        <div class="col-xs-6"><button type="button" class="btn btn-danger pull-right" @click.prevent="removeBlockParticipant">Remove Block</button></div>\
      </div>\
      <table class="table table-bordered" id="participants-table" v-model="participant_block">\
     <thead>\
        <tr>\
            <th>#</th>\
            <th>Operator</th>\
            <th>Head Operator</th>\
            <th></th>\
        </tr>\
    </thead>\
    <tbody>\
        <tr v-for="(row, index) in rows" track-by="index">\
            <th>{{ index + 1 }}</th>\
            <td>\
                <select style="width: 100%" v-model="row.selected">\
                    <option v-for="operator in operators" :selected="(row.selected == operator.name)">{{ operator.name}}</option>\
                </select>\
            </td>\
            <td>\
                <input type="checkbox" name="head" v-model="row.head_operator" @click="selectHeadOperator(index)"/>\
            </td>\
            <td>\
                <input type="button" class="ibtnDel btn btn-md btn-danger" @click="removeOperator(index)" value="Remove" />\
            </td>\
        </tr>\
    </tbody>\
    <tfoot>\
        <tr>\
            <td colspan="4" style="text-align: left;">\
                <input type="button" class="btn btn-lg btn-block" value="Add Operator to Participant Block" @click="addOperator"/>\
            </td>\
        <tr>\
        <tr>\
        </tr>\
    </tfoot>\
</table>\
</div>\
',

data: function () {
   return {
     rows : [

     ]
   }
}, 

methods: {
    addOperator: function() {
        this.rows.splice(this.rows.length, 0, {});
        if (this.rows.length == 1)
             this.rows[0].head_operator = true;
     },

    removeOperator: function(value) {
        this.rows.splice(value, 1);
    },

    selectHeadOperator: function(index) {
        this.rows.forEach(function(row, counter) {
            if (counter != index) row.head_operator = false;
        });
    },

    removeBlockParticipant: function() {
        this.$emit('removeBlockParticipant');
    },

    makeBlockWinner: function() {
        this.$emit('makeBlockWinner');
    }
 }
});

new Vue({
  el: '#main-form',

 data: {
     participant_blocks: [],
     operators: [],
     index: 0
},

 mounted: function() {
     vm = this;
    axios.get('/operators').then((response) => {
        vm.operators = response.data;
    });
 }, 

methods: {
    addBlockParticipant: function() {
        this.participant_blocks.splice(this.participant_blocks.length, 0, {});
},

removeBlockParticipant: function() {
    console.log('test 1');
},

makeBlockWinner: function() {
    console.log('test 2');
},
} });

1) 组件中的 $emit 不会向父级发送消息。 removeBlockParticipant 和 makeBlockWinner 它们不记录消息。我不明白为什么。是不是因为这些组件是动态创建的，所以我必须使用另一个系统？

2) 我面临的另一个问题是我想在动态创建的每个 select 输入上使用库 select2.js。是否可以在我正在编写的系统中应用此库，意思是，是否可以:

$('#component').select()

在此之前创建 select？类似于 Jquery ".on()" ?

Answer 1

这会儿我发现错误是子组件发出的事件相关的属性不能有驼峰语法。

所以：

  @removeBlockParticipant="removeBlockParticipant"

应该是：

  @remove-block-participant="removeBlockParticipant"

以防有人遇到同样的问题。

与动态创建的组件进行父子通信

parent-child communication with dynamically created components

vue.js

vue-component