Vuejs2 子组件上的Vue 2触发方法

如果我可以在用户对象更新时触发和事件或调用vue按钮组件中的方法，我会很高兴。我需要确保这只发生在这个特定的vue按钮上，而不发生在页面上的任何其他按钮上

按钮控制一个状态对象，该对象根据服务器的响应设置按钮的样式。如果返回错误响应，则显示红色；如果返回成功响应，则显示绿色。在这种情况下，该按钮也被禁用，因此用户无法单击它。我需要有能力从家长重置按钮时，用户被更新

我不相信全局事件总线是解决方案，因为我需要对哪些组件响应事件进行细粒度控制，而这个按钮在很多地方都有使用

<template>
    <div class="row">
        <div class="col-12">
            <basic-input-field :resource="user" :set-resource="setUserProperty" property="name" label="Name"></basic-input-field>
            <basic-input-field :resource="user" :set-resource="setUserProperty" property="email" label="Email"></basic-input-field>
            <basic-input-field :resource="user" :set-resource="setUserProperty" property="password" label="Password"></basic-input-field>

            <vue-button :on-click="updateUser" label="Save"></vue-button>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import basicInputField from '../general/forms/basic-input-field.vue';
    import vueButton from '../general/buttons/vue-button.vue';

    export default {
        name: 'user',
        data() {
            return {
            };
        },
        mixins: [],
        components: {
            basicInputField,
            vueButton
        },
        computed: {
            user() {
                return this.$store.state.user;
            },
        },
        mounted() {
            this.$httpGet('user', {id: 5});
        },
        watch: {
            'user': function (newUser) {
                // I want to trigger an event inside the component vue-button
                // I do not want to trigger then event in every vue-button component on the page just this vue-button
                // I need to call a resetStatus method within the vue-button component when the user changes
                // This would have worked in vue 1 with an event 'resetStatus' that would call the method in the vue-button component
                this.$broadcast('resetStatus');
            }
        },
        methods: {
            setUserProperty(property, value) {
                this.$store.commit('UPDATE_MODULE_RESOURCE', {module: 'user', resource: property, value: value});
            },
            updateUser() {
                return this.$httpPut('user', {id: this.user.id}, this.user);
            }
        },
    };
</script>

从“axios”导入axios；
从“../general/forms/basic input field.vue”导入基本输入字段；
从“../general/buttons/vue button.vue”导入vueButton；
导出默认值{
名称：“用户”，
数据（）{
返回{
};
},
混合物：[]，
组成部分：{
巴斯辛普特菲尔德，
vueButton
},
计算：{
用户（）{
返回此。$store.state.user；
},
},
安装的（）{
这是.$httpGet（'user'，{id:5}）；
},
观察：{
“用户”：函数（newUser）{
//我想在组件vue按钮内触发一个事件
//我不想在页面上的每个vue按钮组件中触发then事件，只想触发此vue按钮
//当用户更改时，我需要在vue按钮组件中调用resetStatus方法
//这将在vue 1中使用一个事件“resetStatus”，该事件将调用vue按钮组件中的方法
这是。$broadcast（'resetStatus'）；
}
},
方法：{
setUserProperty（属性、值）{
这个.$store.commit（'UPDATE_MODULE_RESOURCE'，{MODULE:'user'，RESOURCE:property，value:value}）；
},
updateUser（）{
返回这个.httpPut（'user'，{id:this.user.id}，this.user）；
}
},
};