javascript - vue 双向绑定问题$emit无效

问题描述

问 题

父组件变量传给子组件，子组件修改后回传给父组件，无法修改

<div id="app">
    <navbar :list="nav" :current="current"></navbar>
</div>

<template id="navbar">
    <div class="col" v-for="(item,index) in list" @click="setCurrent(index)">
        <div :class="{current:current==index}">{{item.name}}</div>
    </div>
</template>

<script>
    new Vue({
        el: '#app',
        data: {
            nav: [{
                name: '标题',
                type: 'title'
            }, {
                name: '颜色',
                type: 'color'
            }],
            current: 0
        },
        methods: {
            onCurrent: function(index) {
                console.log(index);
                this.current = index;
            }
        },
        components: {
            navbar: {
                props: ['list', 'current'],
                template: '#navbar',
                methods: {
                    setCurrent: function(index) {
                        this.$emit('on-current', index);
                    }
                }
            }
        }
    });
    </script>

子组件中setCurrent正常执行，父组件onCurrent却没有反应，而且父组件的current变量未发生变化;

有哪位大大帮看看什么情况

解决方案

在你代码中没有看到你使用到onCurrent这个方法

<div id="app">
    <navbar :list="nav" :current="current" @on-current="onCurrent"></navbar>
</div>

这篇关于javascript - vue 双向绑定问题$emit无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！