Question

我有以下组件：

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
},

我想做的事情：

当我点击元素时，我想将单击的属性设置为true（对于该元素），对于其他元素，我想将其设置为false;此外，我想在 mouseenter / mouseout 事件被触发时检查点击是否为true / false。

我怎么能做到这一点？

Answer 1

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

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

1 个答案: