Question

这是我在Vue中的第一个项目，是对用JQuery编写的应用程序的转换。

我有一个SPA，它实际上是一个向导中的4种形式。我在主控制器中拥有整个应用程序的状态，并且每种形式都构建为用于代码分离的单独组件，但与应用程序紧密耦合，并且不可重用。第一种形式具有四个预先输入的自动完成功能，这是一个通用组件。预输入v绑定对象数组作为其搜索列表，v绑定对象属性以进行搜索并通过this.$emit发出所选对象，我需要更新祖父母（根）上的特定属性对象的数据对象，但是每次更新所选项目中的属性都会有所不同。目前，我是通过在预输入：event_to_emit and the selected()方法上绑定另一个道具来进行此操作的，然后执行this.$emit(this.event_to_emit,this.selected)，并且在表单（父）组件上，我有一个针对此特定事件的事件监听器，我正在做this.$parent.datafield = event.field_i_am_interested_in的事件。

这是this.$parent的有效用法吗，因为该形式与根紧密地结合在一起，或者它是一种反模式。我会做得更好吗this.$emit('update_parent',{field_to_update:'parent_field', value:event.field})。这听起来更干净，但确实需要更多的开发和维护。还是我弄错了这个完全错误的解释？

请注意，目前此应用程序都在一个标签中，并且在重写JQuery中当前使用的应用程序时，我没有在后端使用vuex，模块导入/导出或使用webpack。它仅在Intranet上使用，因此此概念证明无需考虑包大小和渲染时间。

代码：

var app = new Vue({
el:"#vueapp",
data:{
    style:{
        name:"",
        description:"",
        supplier:"",
        supplierRef:"",
        garmentCategory:"",
        brand:"",
        priceList:"",
        sizeType:"",
        colours:[
        ],
        sizes:[
        ],
        skus:[

        ]
    }
}

Vue.component('style-header',{
props:[],
data(){
    return {
        styleName:"",
        styleDescription:"",
        supplier:"",
        supplierID:"",
        supplierCode:"",
        supplierRef:"",
        garmentCategory:"",
        brand:"",
        priceList:""
    } 
template:'#style-header',
methods:{ 
    /*typeAhead event listeners*/
    updateSupplier(event){ /*fires when the correct t-a is updated*/
        console.log("updateSupplier: ", event);
        this.supplierName = event.desc;
        this.supplierID = event.ID;
        this.$parent.style.supplierID = event.id; /* <-- is this a code smell? */
        this.$parent.style.supplier = event.desc;
        }
    }
}

Vue.component('type-ahead',{
template:"#auto-complete",
props: {
    items: {
      default: ()=> {return []},
      type: Array
    }
    ,return_event:{
        type: String
    }
    ,
    filterby: {
        type: String
    },
    title: {
        default: 'Select One...',
        type: String
    },
    should_reset: {
        type: Boolean,
        default: true
    },
    return_id:{
        type:String
    }
    ,return_value:{
        type:String
    }
},
methods: {
  selectItem() {
    if (!this.matches.length) {
      return;
    }
    this.selectedItem = this.matches[this.selected];
    this.visible = false;
    if (this.should_reset) {
      this.query = '';
      this.selected = 0;
    }
    this.$emit(this.return_event, JSON.parse(JSON.stringify(this.selectedItem)));
}
}

＃p-header模板中的

类型头段：

<type-ahead
   v-bind:items="this.$parent.suppliers"
   v-bind:return_event="'style_supplier'" <!-- links this t-a to the @ event -->
   v-bind:title="'Suppliers'"
   v-bind:filterby="'desc'"
   v-bind:should_reset="true"
   @style_supplier="updateSupplier" <!-- fires the correct update on the style-header -->
></type-ahead>

从vue2中的孙子组件更新祖父母数据对象

0 个答案: