Vue-组件
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共享的数据,实现数据传递,所以仍然是白学 😓