Javascript Vue 2中更改时通过范围输入值

在Vue 2中：我有一个

应用程序

组件，它有一个

滑块

组件：

App.vue

<template>
    <div>
        <Slider :foo="store.foo"></Slider>
    </div>
</template>

<script>
    import store from './components/store.js';
    import Slider from './components/Slider.vue';

    export default {
        name: 'app',

        components: { Slider },

        data() { 
            return {
                store: store
            }
        },

        methods: {
            changeFoo(foo) {
                console.log('change!', foo);
            },
        },
    }
</script>

<template>
    <div>
        <input type="range" min="1" max="100" step="1" @change="changeFoo" />
    </div>
</template>

<script>
    export default {
        props: ['foo'],
        methods: {
            changeFoo() {
                this.$emit('changeFoo', foo);
            }
        }
    }
</script>

---

在

输入

元素中，但Vue发出警告，不允许我更改道具。

而不是使用道具为滑块创建新的数据变量，并在发射中传递此变量，如下所示：

<template>
    <div>
        <input v-model="sliderVal" type="range" min="1" max="100" step="1" @change="changeFoo" />
    </div>
</template>

<script>
    export default {
        props: ['foo'],
        data: function() {
           return {
              sliderVal: ""
           }
        }
        methods: {
            changeFoo() {
                this.$emit('changeFoo', this.sliderVal);
            }
        }
    }
</script>

<template>
    <div>
        <Slider :foo="store.foo" @change-foo="changeFoo"></Slider>
    </div>
</template>

导出默认值{
道具：['foo']，
数据：函数（）{
返回{
幻灯片：“
}
}
方法：{
changeFoo（）{
this.emit（'changeFoo'，this.sliderVal）；
}
}
}

此外，在App.vue中，您必须按如下方式列出此事件：

<template>
    <div>
        <input v-model="sliderVal" type="range" min="1" max="100" step="1" @change="changeFoo" />
    </div>
</template>

<script>
    export default {
        props: ['foo'],
        data: function() {
           return {
              sliderVal: ""
           }
        }
        methods: {
            changeFoo() {
                this.$emit('changeFoo', this.sliderVal);
            }
        }
    }
</script>

<template>
    <div>
        <Slider :foo="store.foo" @change-foo="changeFoo"></Slider>
    </div>
</template>