Javascript Vue：单击单选按钮从父组件更改组件道具

我有两个组件：

Toggle.vue

它基本上是一个按钮，还有一个

TestToggle.vue

它内部有两个

Toggle

组件。我希望切换元素能够用作排序单选按钮：一次只能选择一个

应该是这样的（一次只有一个按钮处于活动状态）：

但是，我可以选择两个按钮：

这是不对的

切换.vue：

<template>
    <div class="rounded-full m-5 w-40 
                flex justify-center 
                p-2 cursor-pointer"
         :class = "status ? 'bg-green-700 
                             hover:bg-green-600' :
                            'bg-red-700 
                             hover:bg-red-600'"
         v-on:click="status = true">
        <p>{{text}} : {{status}}</p>
    </div>
</template>

<script>
    export default {
        props:  {
            text:  {
                type: String,
                default: ''
            },
            status: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<template>
    <div>
        <p>Active: {{activeTab}}</p>
        <Toggle v-on:click = "activeTab = 1"
                text="Toggle 1 "/>
        <Toggle v-on:click = "activeTab = 2"
                text = "Toggle 2"/>
    </div>
</template>

<script>
     import Toggle from '../test/Toggle.vue';

    export default {
        components: {Toggle},

         data: function () {
             return {
                activeTab: 1
            }
        },
        methods: {

        }
    }
</script>

<template>
    <div class="rounded-full m-5 w-40
                flex justify-center
                p-2 cursor-pointer"
         :class = "status ? 'bg-green-700 hover:bg-green-600' :
                            'bg-red-700 hover:bg-red-600'">
    <p>{{text}} : {{status}}</p>
    </div>
</template>


<script>
    export default {
        props:  {
            text:  {
                type: String,
                default: ''
            },
            status: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<template>
    <div>
        <p>Active: {{activeTab}}</p>
        <Toggle v-on:click = "activeTab = 1"
                text="Toggle 1 "
                v-bind:status="activeTab === 1"/>
        <Toggle v-on:click = "activeTab = 2"
                text = "Toggle 2"
                v-bind:status="activeTab === 2"/>
    </div>
</template>


<script>
     import Toggle from '.././toggle-so/Toggle.vue';

    export default {
        components: {Toggle},

        data: function () {
            return {
                activeTab: 1
            }
        },
        methods: {

        }
    }
</script>

TestToggle.vue：

<template>
    <div class="rounded-full m-5 w-40 
                flex justify-center 
                p-2 cursor-pointer"
         :class = "status ? 'bg-green-700 
                             hover:bg-green-600' :
                            'bg-red-700 
                             hover:bg-red-600'"
         v-on:click="status = true">
        <p>{{text}} : {{status}}</p>
    </div>
</template>

<script>
    export default {
        props:  {
            text:  {
                type: String,
                default: ''
            },
            status: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<template>
    <div>
        <p>Active: {{activeTab}}</p>
        <Toggle v-on:click = "activeTab = 1"
                text="Toggle 1 "/>
        <Toggle v-on:click = "activeTab = 2"
                text = "Toggle 2"/>
    </div>
</template>

<script>
     import Toggle from '../test/Toggle.vue';

    export default {
        components: {Toggle},

         data: function () {
             return {
                activeTab: 1
            }
        },
        methods: {

        }
    }
</script>

<template>
    <div class="rounded-full m-5 w-40
                flex justify-center
                p-2 cursor-pointer"
         :class = "status ? 'bg-green-700 hover:bg-green-600' :
                            'bg-red-700 hover:bg-red-600'">
    <p>{{text}} : {{status}}</p>
    </div>
</template>


<script>
    export default {
        props:  {
            text:  {
                type: String,
                default: ''
            },
            status: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<template>
    <div>
        <p>Active: {{activeTab}}</p>
        <Toggle v-on:click = "activeTab = 1"
                text="Toggle 1 "
                v-bind:status="activeTab === 1"/>
        <Toggle v-on:click = "activeTab = 2"
                text = "Toggle 2"
                v-bind:status="activeTab === 2"/>
    </div>
</template>


<script>
     import Toggle from '.././toggle-so/Toggle.vue';

    export default {
        components: {Toggle},

        data: function () {
            return {
                activeTab: 1
            }
        },
        methods: {

        }
    }
</script>

活动：{{activeTab}}

从“.././Toggle so/Toggle.vue”导入切换；
导出默认值{
组件：{Toggle}，
数据：函数（）{
返回{
活动选项卡：1
}
},
方法：{
}
}

在

Toggle.vue

中，

状态

声明为道具，因此您不应修改它：

您在Toggle.vue中将
status
声明为prop，但不将TestToggle.vuery设置中的任何内容作为TestToggle.vue中的数据属性传递给Toggle.vue。此外，您应该绑定类，而不是使用三元：
：class=“{'bg-green-700'：status，'bg-red-700'：！status}”
但
status
属于
切换组件。这正是我不确定的
传递给Toggle.vue的
部分，我们可以在Toggle.vue中将
状态
声明为数据属性，为什么我不能仅仅因为它是一个道具就修改它？我认为将
单击->反向状态
逻辑放在
开关中。vue
将遵循干式原则？道具是从父对象传递给子对象的，因此不建议在子对象中修改它，因为当我运行代码并单击按钮时，父对象可以覆盖它，没有任何变化-文本和颜色（请参见问题编辑）答案均未更新。您还需要使用
native
事件修饰符，才能收听子组件的
div
单击。非常感谢！