Question

我有一个通过总线发出事件的组件，如下所示。同一组件需要在另一个组件上包含两次。我希望发出的事件填充不同的变量；

    //component.vue
    <template>
        <div>
            Hello there?
            <a @click="changed">New</a>

            <ol>
               <li v-for="option in list">
                   <div class='row justify-content-start'>
                      <div class='col-sm-6'><input v-model="option.value" type='text' placeholder="key"/></div>
                      <div class='col-sm-6'><input v-model="option.name" type='text' placeholder="Name"/></div>
                   </div>
               </li>
            </ol>
        </div>
    </template>
    <script>
      export default{
            props:['options','iscolumn'],
            data(){
                  return {list:this.options,item:{name:'',value:''}}
            },
            methods:{
                  changed(){
                        $bus.$emit('add-option',this.item,this.iscolumn);
                  }
            }
      }
    </script>
/** root.vue **/

<template>
      <div>
            <h3>Rows</h3>
            <div><rows :options="rows" :iscolumn="false"/></div>


            <h3>Columns</h3>
            <div><rows :options="columns" :iscolumn="true" /></div>
      </div>
</template>

<script>
      export default{
            components:{'rows':require('./component')},
            data(){
                  return {
                        columns:[],rows:[]
                  }
            },
            created(){
                  this.$bus.$on('add-option',(option,iscolumn)=>{
                        if (is_column) {this.columns.push(option);}
                        else this.rows.push(option);
                  })
            }
      }
</script>

当我从根目录单击 New 时，将同时填充列和行。在寻找每个组件独立的情况下，无法理解它们如何共享变量。任何帮助将不胜感激。

Answer 1

为rows组件分配唯一的键属性：

<template>
    <div>
        <h3>Rows</h3>
        <div><rows key="rows1" :options="rows" :iscolumn="false"/></div>

        <h3>Columns</h3>
        <div><rows key="rows2" :options="columns" :iscolumn="true" /></div>
    </div>
</template>

VueJS独立组件事件

1 个答案: