Vue 全组件 局部组件

一、组件定义和使用

1、全局组件

定义

<template>

<div>

<h1>This is a global component</h1>

</div>

</template>

<script lang="ts">

</script>

<style></style>

导入

全局组件在main.ts(Vue + TS的项目)引入,

或者在main.js(Vue + JS的项目)引入

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import GlobalComponent from "../src/components/component/GlobalComponent.vue";

const app = createApp(App)

app.component("GlobalComponent",GlobalComponent);

app.use(store).use(router).mount('#app')

使用

全局组件可以在任意组件中使用,不需要再次导入

2、局部组件

定义

导入与使用

二、组件通信

1、props

(1)传递单个值

(2)传递多个值

如果传递的时对象,对象在被子组件的props接收时需要解构,依次写在props数组中

传递的如果是一个个的值,则直接在props数组中写入即可

2、插槽

插槽的作用:让子组件可以接收父组件传过来的元素、组件

(1)匿名插槽

如果父元素只传递一个元素,或者传递的多个元素会在一个地方使用,那么可以使用匿名插槽

(2)具名插槽

父组件会传递多个元素,这些元素需要再不同的地方使用,这时需要使用具名插槽进行区分

(3)作用域插槽

父组件需要用到子组件中的数据时,可以使用作用域插槽将子组件的数据传递过去

子组件

<template>

<div>

<h1>This is a local component</h1>

<slot v-for="(item,index) in list" :item="item" :index="index"/>

</div>

</template>

<script lang="ts" setup>

const list = [1,2,3,4];

</script>
//父组件

<template>

<div>

<h1>This is a component view</h1>

<div>

<GlobalComponent />

<LocalComponent v-slot="slotProps">

<div>{{ slotProps.item }}*****{{ slotProps.index }}</div>

</LocalComponent>

</div>

</div>

</template>
//父组件写法二

<template>

<div>

<h1>This is a component view</h1>

<div>

<GlobalComponent />

<LocalComponent v-slot="{item,index}">

<div>{{ item }}*****{{ index }}</div>

</LocalComponent>

</div>

</div>

</template>

3、provide&inject

父组件给子组件传值,子组件使用props接收,如果孙子组件乃至重孙子组件要使用父组件的数据,那么就要一层层用props传递,特别麻烦。

父组件使用provide(提供)提供数据

子组件、孙子组件、重孙子组件....可以使用inject接收数据

//父组件

<template>

<div>

<LocalComponent />

</div>

</template>

<script setup lang="ts">

import LocalComponent from "../components/component/LocalComponent.vue";

import { provide, ref } from "vue";

const msg = ref('hello world');

provide('msg',msg);

</script>
//子组件

<template>

<div>

LocalComponent

<GrandChild />

</div>

</template>

<script lang="ts" setup>

import GrandChild from '../component/GrandChild.vue';

</script>
//孙子组件

<template>

<div>

<h1>This is a GrandChild component</h1>

{{ msg }}

</div>

</template>

<script lang="ts" setup>

import { inject } from "vue";

const msg = inject('msg');

</script>

<style></style>

4、事件通信

三、异步组件

相关推荐
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
Nan_Shu_61410 小时前
Web前端面试题(2)
前端
知识分享小能手10 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队11 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光11 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军11 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite