Javascript VueJS文件中有两个相同的组件，其中一个组件中的数据更改会更改另一个组件的数据吗？

我已经为下拉菜单创建了一个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>

我在parent中使用它作为-

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

---

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

这里有几个问题

所以，首先，我建议阅读一些有助于阐明v型车工作原理的书籍

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

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

然而，正如一位评论员所提到的，您也在修改子组件中的属性，就像它是一个数据属性一样，这是一个非常糟糕的想法。将其作为单独的数据值

您正在修改道具值。不要那样做。