如何从vue.js中的另一个组件更新一个组件

我有一个基于vue.js 2.0的web应用程序

我有一个基于select2插件显示输入的组件

默认情况下，它显示选定的选项，但当用户单击它时，我显示select2以允许用户修改选项

代码如下所示：

<template>
<div @click="toggleEdit">
    <span v-show="isEnabled">
        <select
            class="form-control"
            :name="name"
            :multiple="multiple"
        >
            <option v-for="opt in options" :value="opt.id"> {{ opt.text }} </option>
        </select>
    </span>
    <span v-show="!isEnabled">
        <div v-if="selectedOptions.length === 0">
            {{ emptyText }}
        </div>
        <div v-for="opt in selectedOptions">
            {{ opt }}
        </div>
    </span>
</div>
</template>
<script>
export default {
    props: {
        options: {
            type: Array,
            required: false,
            default: function() {
                return []
            }
        },
        name: {
            required: true,
            type: String
        },
        multiple: {
            required: false,
            type: Boolean,
            default: false
        },
        emptyText: {
            required: false,
            type: String,
            default: ""
        },
        sourceUrl: {
            required: false,
            type: String,
            default: ""
        },
        enabled: {
            required: false,
            type: Boolean,
            default: false
        }
    },

    data() {
        return {
            isEnabled: this.enabled
        }
    },

    watch: {
        options: {
            handler: function() {
                console.log(arguments)
            },
            deep: true
        }
    },

    mounted: function() {
        this.select = $(this.$el).find("select");
        this.select.select2();
        var that = this;
        this.select.on("change", function(e) {
            var indexMap = {};
            for(var i = 0; i < that.options.length; i++) {
                that.options[i].selected = false;
                indexMap[that.options[i].id] = i;
            }
            var selected = that.select.select2('val');
            if(typeof selected === "string") {
                selected = [selected];
            }
            for(var i = 0; i < selected.length; i++) {
                var index = indexMap[selected[i]];
                console.log(index)
                console.log(selected[i])
                if(index !== undefined) {
                    var option = that.options[index];
                    option.selected = true;
                    that.$set(that.options, index, option);
                }
            }
        })
        this.select.on("select2:open", function() {
            that.isEnabled = true;
        });
        this.select.on("select2:close", function() {
            that.isEnabled = false;
        });
    },
    methods: {
        toggleEdit() {
            if(this.isEnabled) return; // to pass select2 clicks
            this.isEnabled = !this.isEnabled;
            var that = this;
            this.$nextTick(function() {
                that.select.select2("open");
            });
        }
    },
    computed: {
        selectedOptions: function() {
            console.log(this.options)
            return this.options.filter(function(option) {
                console.log(option.selected);
                if(option.selected === true) return true;
                return false;
            });
        }
    }
}

我想解析“disableFields”数组，并从

这个
组件
另一个
组件中禁用

实现这一点的一种方法（伪代码）：

在
安装的
方法中

var self = this;
$(document).on("disableField" + this.name, function() {
    self.isEnabled = false
})

没有父组件，有没有更好的方法来实现这一点？
要真正实现您的目标并不容易，因为您的文章太长，而且内容太多，但我会尝试。如果遗漏了什么，请发表评论，我会尝试编辑以帮助您更好地完成

禁用的字段

我建议在父组件的
数据
中使用此数组（例如，具有完整表单/页面的组件），然后将其传递给您的字段，如
。请注意
：已禁用。数据绑定将保持此数据与父数据单向同步（这意味着禁用父
中的每个更改。componentId
将反映在子组件中）

解析“禁用”JSON

在我看来，这是非常直截了当的，因为您只需将返回的字段分配给
数据：{disabled}
，但如果您无法理解，请告诉我们

**组件之间的其他通信方式**

如果要从子组件更新父组件，则必须使用使用Vue事件总线或事件处理程序的事件。
在子组件上，如果不需要从子组件传递特殊数据或在子组件中创建自定义事件发射器（如：

// child component
methods: {
someMethod() => {
this.emit('customEvent', someData)
}
}

//parent component
<child-component @customEvent='customEventHandler(dataFromChild)'> 

//子组件
方法：{
someMethod（）=>{
this.emit（'customEvent'，someData）
}
}
//父组件

希望能有帮助
 不允许直接与其他组件通信。您可以使用父组件在组件或组件之间进行通信

组件A发出一个事件，而组件B可能捕获它，反之亦然

// component A
bus.$emit('cool_event_name', interesting_data)

// component B
bus.$on('cool_event_name', function(interesting_data) {
   console.log(interesting_data)
})

另一种解决方案可能是使用
$root
，它可以从Vue实例的所有子组件访问。这节省了全局总线的定义（如上所述）。请注意，此方法是一种通用方法，更像是某些边缘情况的解决方案

// component A
this.$root.$emit('cool_event_name', interesting_data)

// component B
this.$root.$on('cool_event_name', function(interesting_data) {
   console.log(interesting_data)
})

您可以使用
this.$root
而不使用全局变量：

// component A emits an event
export default {
  name: 'A',
  methods: {
    buttonClicked: function () {
      this.$root.$emit('myEvent', 'new message!');
    }
  }

// component B catch your event
export default {
  name: 'B',
  data () {
    return {
        message: 'Old message!'
    }
  },
  mounted: function () { 
    this.$root.$on('myEvent', (text) => { // here you need to use the arrow function
     this.message = text;
    })
  }
}

为了将来，尽量缩短它。你的问题质量很好，但太长了……这条评论帮助我解决了一个使用$on的问题。我想淡出所有其他v-for项目，但我刚刚单击/发出事件的项目除外，非常感谢。是否最好使用Vuex状态存储解决此问题？
// component A
bus.$emit('cool_event_name', interesting_data)

// component B
bus.$on('cool_event_name', function(interesting_data) {
   console.log(interesting_data)
})

// component A
this.$root.$emit('cool_event_name', interesting_data)

// component B
this.$root.$on('cool_event_name', function(interesting_data) {
   console.log(interesting_data)
})

// component A emits an event
export default {
  name: 'A',
  methods: {
    buttonClicked: function () {
      this.$root.$emit('myEvent', 'new message!');
    }
  }

// component B catch your event
export default {
  name: 'B',
  data () {
    return {
        message: 'Old message!'
    }
  },
  mounted: function () { 
    this.$root.$on('myEvent', (text) => { // here you need to use the arrow function
     this.message = text;
    })
  }
}