javascript - VueJS 在一个文件中两个相同的组件，其中一个的数据更改会更改另一个的数据？

Question

我创建了一个用于下拉列表的 VueJS 组件。

<template>
    <div>
        <select v-bind:value="value" v-on:input="$emit('input', $event.target.value)">
            <option v-for="(option, index) in dropdownOptions"
                    v-bind:key="index">
                {{ option }}
            </option>
        </select>
    </div>
</template>


<script>
export default {
    props: {
        dropdownOptions: Array,
        value: String
    },
    mounted() {
        this.value = this.dropdownOptions? this.dropdownOptions[0] : ""; 
    }
}
</script>

我已在父级中使用它 -

<div id="selectvideodropdown" class="col">
    <Dropdown v-bind:dropdown-options="allVideos" v-model="selectedVideo">                     
    </Dropdown>
</div>
<div id="selectvideodisplaymode" class="col">
     <Dropdown v-bind:dropdown-options="allDisplayMode" v-model="selectedDisplayMode">                     
     </Dropdown>
</div>

家长的脚本 -

<script>
    import VideoPlayer from "./Videoplayer.vue"
    import Dropdown from "../shared/Dropdown.vue"

    export default {
        components: {
            VideoPlayer,
            Dropdown
        },
        data() {
            return {
                allVideos: ["Video 1", "Video 2", "Video 3"],
                allDisplayMode: ["With Bounding Box", "Without Bounding Box"],
                selectedVideo: "",
                selectedDisplayMode: "",
            }
        }
    }; 
</script>

奇怪的是，当我选择下拉列表时，它将其他下拉列表的当前值更改为空字符串。它只在页面加载后发生一次，并且不会再次重复。

Answer 1

这里有几个问题。

所以，首先，我建议阅读 this这应该有助于阐明 v-model 的工作原理。

现在，请注意，v-model 基本上在数据和值之间创建了双向绑定(bind)属性。

同时发生了很多事情，但其基本要点是您的父组件中有绑定(bind)到值的数据，但是当您初始化每个组件时，您需要手动设置该值。当 Vue 更新所有内容时，它最终会将另一个下拉列表中的绑定(bind)属性重置为从其 v-model 传入的值，该值恰好是空字符串。

但是，正如评论者提到的，您还像更改数据属性一样更改子组件中的属性，这是一个非常糟糕的主意。将其设为单独的data 值。