Vue-组件

Vue-组件

前文有关于组件,我们提到了SFC(Single File Component)单文件组件


组合

在components(组件库)中,建立三个组件(.vue文件)

<script setup>

</script>

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

<style scoped>

</style>
<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>
效果图

vue组件.PNG


组件中的参数传递

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

  • 子传父
  • 父传子
  • 兄弟传参(基于以上两种实现)

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

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

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


个人理解就是,使用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共享的数据,实现数据传递,所以仍然是白学 😓