四、Vue3基础四

---

一、vue3 父子组件传参

**

父组件向子组件传递参数

**
父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值。
字符串类型不需要v-bind

父组件中向子组件传递数据(字符串)的方法

<template>
    <div class="container">
        <div class="left-menu">
            <!-- 重点在这里-->
            <Menu title="这个字符串可以传到Menu这个组件中"></Menu>
        </div>
        <div class="right">
            <Header class="header"></Header>
            <Content class="content"></Content>
        </div>
    </div>
    

</template>

<script setup lang='ts'>
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'

</script>

<style lang='scss' scoped>
.container{
     
    display: flex;
    .left-menu{
     
        width: 20%;
        background-color: yellowgreen;
    }
    .right{
     
        width: 80%;
        border:1px solid pink;
        flex-flow: column wrap;
        .header{
     
            width:100%;
            height: 200px;
            border: 1px solid yellowgreen;
        }
        .content{
     
            width: 100%;
            height: 200px;
            border: 1px solid burlywood;
        }
    }
}
</style>

子组件Menu.vue中接收父组件传递过来的字符串

<template>
    <div class="menu">
        左边菜单区域 <br>
        {
  {title}}
    </div>
</template>

<script setup lang='ts'>
// 接收来自父组件传递来的数据
// 传递过来的数据用一个类型约束一下
type Props = {
     
    title:string
}
defineProps<Props>()
</script>

<style lang='scss' scoped>
</style>

从父组件传递复杂数据类型到子组件中

父组件代码

<template>

    <div class="container">
        <div class="left">
            <!-- 这个:data可以写成v-bind:data -->
            <Menu class="menu" title="将这个title传到Menu子组件中" :data="list"></Menu>
        </div>
        <div class="right">
            <Header class="header"></Header>
            <Content class="content"></Content>
        </div>
    </div>

</template>

<script setup lang='ts'>
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
import {
      ref, reactive } from 'vue'

const list = ref<number[]>