Javascript VueJs-I don'；我不明白如何将布尔值传递给chid组件

我知道这个主题肯定在某个地方被处理过，但我真的不明白如何将变量传递给子组件

我想做的是，将父组件中的“displayTogglingMenu”传递给子组件中的“toggle”

父组件

  data(){
    return  {
      selectedItem: 1,
      displayTogglingMenu: false,
      items: [
        { text: 'Home', name: 'home', icon: 'mdi-home' },
        { text: 'Courses', name: 'courses_index', icon: 'mdi-school'  },
        { text: 'Enrolments', name: 'enrolments_index', icon: 'mdi-format-list-bulleted' },
        { text: 'Lecturers', name: 'lecturers_index', icon: 'mdi-account-tie' },
      ],
    }
  },   

data(){
    return  {
        toggle: valueOfParentComponent,
        alertMessage: '',
        loadTable: true,
        courses: [],
        expendable: [],
        ...
},   

子组件

  data(){
    return  {
      selectedItem: 1,
      displayTogglingMenu: false,
      items: [
        { text: 'Home', name: 'home', icon: 'mdi-home' },
        { text: 'Courses', name: 'courses_index', icon: 'mdi-school'  },
        { text: 'Enrolments', name: 'enrolments_index', icon: 'mdi-format-list-bulleted' },
        { text: 'Lecturers', name: 'lecturers_index', icon: 'mdi-account-tie' },
      ],
    }
  },   

data(){
    return  {
        toggle: valueOfParentComponent,
        alertMessage: '',
        loadTable: true,
        courses: [],
        expendable: [],
        ...
},   

以下是我试图隐藏的组件，如Tim所问：

 <div class="table-container">
            <b class="circle"></b>

                <v-app>
                    <v-content>
                        <v-card>
                        
                            <v-card-title>

                                <v-text-field
                                    v-model="search"
                                    append-icon="mdi-magnify"
                                    label="Search"
                                    single-line
                                    hide-details
                                    class="search"
                                ></v-text-field>

                                <v-spacer></v-spacer>

                                <router-link :to="{ name: 'new_course'}" class="newItem">New course</router-link>

                            </v-card-title>

                            <v-data-table
                                :headers="courseHeaders"
                                :items="courses"
                                :items-per-page="10" 
                                :loading="loadTable"
                                loading-text="Loading... Please wait"
                                :search="search"
                                :single-expand="singleExpand"
                                :expanded.sync="expanded"
                                item-key="id"
                                show-expand
                                class="elevation-1"
                            >

                                <template v-slot:item.title="{ item }">
                                    <transition-group name="list" tag="p">
                                        <span class=" list-item" v-bind:key="item">{{item.title}}</span>
                                    </transition-group>
                                </template>

                                <template v-slot:item.actions="{ item }">
                                    <transition-group name="list" tag="p">
                                        <span class=" list-item" v-bind:key="item">
                                            <router-link :to="{ name: 'edit_course', params: { id: item.id } }" class="edit-btn" title="Edit">
                                                <v-icon med>mdi-pencil</v-icon>
                                            </router-link>
                                            <v-btn v-on:click="deleteCourse(item.id)" class="del-btn " title="Delete"  >
                                                <v-icon med>mdi-delete</v-icon>
                                            </v-btn>
                                        </span>
                                    </transition-group>
                                </template>

                                <template v-slot:expanded-item="{ headers, item }"  >
                                    <td :colspan="headers.length" class="item-description" >
                                        <h4 >Course description:</h4> 
                                        <p >{{ item.description }}</p>
                                    </td>
                                </template>
                                
                            </v-data-table>

                        </v-card>
                    </v-content>
                </v-app>
            
            <b class="circle2"></b>
        </div>

新课程
{{item.title}
mdi铅笔
mdi删除
课程简介：
{{item.description}

您可以使用属性将数据从父组件传递到子组件

例如

道具是被动的，因此您的

子组件将对其属性的任何更改作出反应，您可以在
v-if
或
v-show
父组件中使用该属性

从“Componenet.vue”导入组件
从“vue”导入{defineComponent}；
导出默认定义组件({
组件：{Component}，
数据（）{
返回{
displayTogglingMenu:错误
}
}
});

小孩

从“vue”导入{defineComponent}；
导出默认定义组件({
道具：['toggle']
});

父菜单中的
displaytoglingmenu
值将作为子菜单中的
切换可用

您可能需要将值设置为
this.$props.toggle
，具体取决于上下文
我希望在displayTogglingMenu转换为true时隐藏一个div容器组件，而不是整个组件，使用v-if conditional。
<template>
  <div v-show="toggle"></div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
    props: ['toggle']

});
</script>