vue3-(父传子)

父组件：

<template>
  <Headler title="我是父组件传递的值" :list="list"></Headler>
  <div class="content">
    <Menu></Menu>
    <Content></Content>
  </div>
</template>

<script setup lang="ts">
import Headler from './components/Headler.vue';
import Content from './components/Content.vue';
import Menu from './components/Menu.vue';
import { ref, reactive } from 'vue';

let list = reactive<number[]>([1, 2, 3]);
</script>
<style>
.content {
  display: flex;
  position: absolute;
  top: 80px;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

子组件：

<template>
  <div class="head">
    <div>我是头部内容</div>
    <div>{{ title }}</div>
    <div>{{ list }}</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

type Props = {
  title: String;
  list: [];
};

defineProps<Props>();
</script>
<style scoped>
.head {
  width: 100%;
  height: 80px;
  background: salmon;
  text-align: center;
  font-size: 20px;
}
</style>

标签：vue,Headler,Menu,list,父传子,components,vue3,import
来源： https://www.cnblogs.com/bzqs/p/16498974.html