Vue 2 - 从组件更改主实例中的模型答案

【问题标题】：Vue 2 - change model in main instance from the componentVue 2 - 从组件更改主实例中的模型
【发布时间】：2017-07-04 09:52:09
【问题描述】：

我有以下组件：

Vue.component('visible-filter', {
    template: `
        <span class="text-muted"
            @mouseenter="changeClassMouseenter($event)"
            @mouseout="changeClassMouseout($event)"
            @click="countryTest(filter)"
            @clicked="clicked = true"
            v-model="clicked"
        ><slot></slot></span>
    `,

    props: ['filter', 'clicked'],

    methods: {

        changeClassMouseenter(event) {
            console.log(this.clicked);
            event.target.classList.remove('text-muted')
        },

        changeClassMouseout(event) {
            event.target.classList.add('text-muted')
        },

        countryTest(filter) {
            Event.$emit('clicked');
            Event.$emit('country-filter', filter);
        }
    }

});

主实例中的事件：

Event.$on('clicked', () => {
    this.clicked = true;
})

主实例中的数据：

data: {
    clicked: false
},

我想做的事：

当我单击元素时，我想将 clicked 属性设置为 true（对于该元素），而对于其余元素，我想将其设置为 false；我还想在 mouseenter/mouseout 事件触发时检查 clicked 是否为真/假。

我怎样才能做到这一点？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您不应将父级从子级更改。
要在父母和孩子（以及孩子->父母）之间进行交流，您可以/应该设置事件。
在子组件中发出事件。很好的例子：https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events
使用<child-component @yourEventName='eventHandler(data)'>收听您父母的事件
在您的父级中处理数据，因此将eventHandler(data) 添加到您的方法中，然后对您的数据做任何您想做的事情。

【讨论】：