Vue-组件

前文有关于组件，我们提到了SFC（Single File Component）单文件组件

---

组合

在components（组件库）中，建立三个组件（.vue文件）

Header

<script setup>

</script>

<template>
  <div>
    欢迎：xxx <a href="#">退出登录</a>
  </div>
</template>

<style scoped>

</style>

Navigator

<script setup>

</script>

<template>
  <div>
    <ul>
      <li>学员管理</li>
      <li>图书管理</li>
      <li>请假管理</li>
      <li>考试管理</li>
      <li>班级管理</li>
      <li>教师管理</li>
    </ul>
  </div>
</template>

<style scoped>

</style>

Content

<script setup>


</script>

<template>
  <div>
    这里是展示主要内容
  </div>
</template>

<style scoped>

</style>

---

App.vue

在App.vue文件中，将这三个文件组合

<script setup>
//引入多个.vue组件
import Header from './components/Header.vue'
import Navigator from './components/Navigator.vue'
import Content from './components/Content.vue'
</script>

<template>
  <div>
    <!-- 直接将引入的.vue组件作为标签使用 -->
    <Header class="header"></Header>
    <Navigator class="navigator"></Navigator>
    <content class="content"></content>
  </div>
</template>

<style scoped>
/* 在css中调整组件位置和大小，完成布局 */
.header{
  height: 80px;
  border: 1px solid red;
}
.navigator{
  width: 15%;
  height: 500px;
  border: 1px solid green;
  float: left;
  /* 利用浮动，使两个元素在一行 */
}
.content{
  width: 84%;
  height: 500px;
  border: 1px solid blue;
  float: right;
    /* 利用浮动，使两个元素在一行 */
}
</style>

效果图

---

组件中的参数传递

组件中的参数传递有三种方式

• 子传父
• 父传子
• 兄弟传参（基于以上两种实现）

defineEmits方法：用于定义向父组件提交数据的事件以及正式的提交数据

defineProps方法：用于定义接受父组件传递的响应式数据和数据类型

当子组件Content和Navigator 传递数据时，需要经过App.vue父组件

---

Navigator

个人理解就是，使用defineEmits方法定义了emits对象的key值（可以有多个key），这个key值自定义

再用emits对象为其key设置value，就完成数据的子传父

<script setup>
//向父组件发送参数
import { defineEmits } from 'vue';
//定义一个向父组件提交数据的事件，事件名称自定义
const emits = defineEmits(["sendMenu"])

//定义一个提交数据的方法
function send(data){
  emits("sendMenu",data)
}

</script>

<template>
  <div>
    <ul>
      <li @click="send('学员管理')">学员管理</li>
      ……
    </ul>
  </div>
</template>

<style scoped>

</style>

---

App.vue

注：在使用事件接受子组件传过来的参数时，事件执行的函数不加 ()

<script setup>
import { ref } from 'vue';

//引入多个.vue组件
import Header from './components/Header.vue'
import Navigator from './components/Navigator.vue'
import Content from './components/Content.vue'

//定义响应式数据，接受子传父的参数
let menu = ref("")
function receiver(data){
  menu.value = data
}
</script>

<template>
  <div>
    <hr>
……
    <!-- 用定义好的sendMenu（key）接收子组件传上来的data -->
    <Navigator @sendMenu="receiver" class="navigator"></Navigator>
    <!-- 将接收到的data 通过message属性发送给子组件 -->
    <content class="content" :message="menu"></content>
  </div>
</template>

<style scoped>
……
</style>

---

Content

content类似一个自定义标签，组件中使用v-bind:属性 就相当于绑定数据到属性中

在子组件使用defineProps直接接受属性，参数类型

<script setup>
//接受父组件的参数
  import { defineProps } from 'vue';
  defineProps({
    message:String
  })

</script>

<template>
  <div>
    {{message}}
  </div>
</template>

<style scoped>

</style>

---

这种组件中的数据传递有很大的限制，他仅限于父子之间的数据传递，而且数据复杂后写起来十分麻烦

后续的学习中，我们会学习Pinia定义.vue共享的数据，实现数据传递，所以仍然是白学 😓

---