第十节——Vue组件

2023-10-30 08:44

本文主要是介绍第十节——Vue组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、什么是组件

组件(Component)是vue.js中很强大的一个功能,可以将一些可重用的代码进行封重用。 所有的Vue 组件同时也是Vue 的实例,可以接受使用相同的选项对象和提供相同的生命周期钩子。 一句话概括:组件就是可以扩展HTML元素,封装可重用的HTML代码,可以将组件看作自定义的HTML元素。在vue项目中,所有.vue结尾的文件都是一个组件

二、定义组件

1、局部组件

引入组件后,需要在components对象里进行注册,注册后可以直接进行使用

创建qf-button.vue文件

<template><div><button>一个朴实无华的按钮</button></div>
</template>

创建learn-component文件并引入

<template><div><!-- 使用标签语法直接使用组件 --><QfButton></QfButton></div>
</template>
<script>
import QfButton from "./qf-button.vue";
export default {/*** 在components里注册组件* key 是 组件名 value 是对应的组件*/components: {QfButton,},
};
</script>

2、全局组件

全局组件注册后,使用时不需要额外的引入可以直接使用

创建qf-input.vue文件

<template><div><input type="text" placeholder="一个普通的输入框"></div>
</template>

在入口文件处引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import QfInput from './qf-input.vue'const app = createApp(App)
/*** 使用component方法注册全局组件,接收两个参数* 第一个参数 组件的名字* 第二个参数 组件的值*/
app.component('qf-input', QfInput)
app.mount('#app')

三、组件传值

1、父传子

在父组件的子组件标签上定义属性,子组件使用props接收

父组件传入

<template><div><!-- 属性名 是对应的 参数名  --><!-- 属性值 是对应的 参数值  --><QfButton buttonName="按钮名字"></QfButton></div>
</template>
<script>
import QfButton from "./qf-button.vue";
export default {components: {QfButton,},
};
</script>

子组件接收

<template><div><!-- 可以直接使用 --><button>{{ buttonName }}</button></div>
</template><script>
export default {// 子组件使用props接收/*** props 属性值 可以是一个数组* 数组里存放当前组件接收到的参数* 注意:props定义的参数名和父组件传入的参数名必须一致*/// props: ["buttonName"],/*** props 属性值 可以是一个对象** 对象的key 是 当前组件接收的参数* 对象的value 又是一个对象* 这种方式了解即可*/props: {buttonName: {/** type 接收参数的类型 */type: String,/** required 参数是否必传 */required: false,/** 参数默认值 */default: "默认按钮名",},},
};
</script>

2、子传父

通过事件传递,子组件使用$emit传递一个事件给父组件。$emit第一个参数是事件名,第二个参数要传给父组件的参数。父组件在子组件标签上使用@接收传过来的事件

qf-input每次输入的时候把输入的内容传给父组件

子组件

<template><div><input @input="inputChange" type="text" placeholder="一个普通的输入框" /></div>
</template><script>
export default {methods: {inputChange(event) {/*** 使用this.$emit方法* 把当前输入的信息传给父组件*//*** 第一个参数是抛出的事件名* 第二个参数是要传给组件的信息 第二个参数可以不传*/this.$emit("componentChange", event.target.value);},},
};
</script>

父组件

<template><div><!-- 属性名 是对应的 参数名  --><!-- 属性值 是对应的 参数值  --><QfButton a="你" b="好" :info="info"></QfButton><!-- 使用 @ 接收 子组件抛出的事件并定义触发的函数inputChange 如果不写括号 会自动接收到传入的参数--><qf-input @componentChange="inputChange"></qf-input><!-- 如果inputChange 函数 带括号 需要使用$event 拿到传入的参数 --><!-- <qf-input @componentChange="inputChange($event)"></qf-input> --></div>
</template>
<script>
import QfButton from "./qf-button.vue";
export default {components: {QfButton,},methods: {inputChange (msg) {console.log(msg)}}
};
</script>

3、祖孙传值

provide / inject 依赖注入

provide:可以让我们指定想要提供给后代组件的数据或方法

inject:在任何后代组件中接收想要添加在这个组件上的数据或方法,不管组件嵌套多深都可以直接拿来用

创建子组件child1.vue、创建孙组件child2.vue 按照等级依次引入

在最上级组件(爷爷组价)写入

<template><div><Child1></Child1></div>
</template>
<script>
import Child1 from "./child1.vue";export default {components: {Child1,},/*** 使用provide 统一下发值* provide 是一个函数 函数必须有返回值* 返回的值可以在任意子级组件接收*/provide () {return {msg: "最上级组件传值",handle: this.handle}},methods: {handle (msg) {console.log("触发接收?", msg)}}
};
</script>

孙组件接收child2.vue

<template><div>孙组件 ---{{ msg }}</div><button @click="handle('传入的')">+1</button>
</template>
<script>
export default {// 使用 inject 接收 上级组件统一下发的值inject: ["msg", 'handle'],
};
</script>
provide / inject 使用场景

国际化

主题色切换

祖孙传值

$attrs

多层嵌套组件传递数据时,如果只是传递数据,而不做中间处理的话就可以用这个,比如父组件向孙子组件传递数据时

$attrs:包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合,然后还要继续传给子组件内部的其他组件,就可以通过 v-bind="$attrs"

爷爷组件

<template><div><Child1 @handle2="handle" name="来自爷爷的问候"></Child1></div>
</template>
<script>
import Child1 from "./child1.vue";export default {components: {Child1,},methods: {handle (msg) {console.log("触发接收?", msg)}}
};
</script>

子组件

<template><div>子组件<!-- 使用 v-bind="$attrs" 继续往下传--><Child2 v-bind="$attrs"></Child2></div>
</template><script>
import Child2 from "./child2.vue";
export default {components: {Child2,},
};
</script>

孙组件

<template><div>孙组件 ---{{ msg }}</div>
</template>
<script>
export default {/*** 超纲一点生命周期😄* 组件创建完成后调用*/created() {/*** 使用 this.$attrs 获取上级组件往下抛的所有的值* 注意:这里传入的事件会在事件名前加上on,并且驼峰 如 爷爷组件传入的* @handle2 在这里变成了onHandle2*/console.log(this.$attrs);},
};
</script>

4、兄弟组件传值

一般使用状态管理解决

event bus

EventBus 是中央事件总线,不管是父子组件,兄弟组件,跨层级组件等都可以使用它完成通信操作。

在 Vue 3 中,由于 Vue 2 中的全局事件总线(Vue.prototype.$emit 和 Vue.prototype.$on)被移除,我们需要使用其他方式来实现类似的功能。在 Vue 3 中,可以使用 mitt 这个第三方库来创建一个事件总线。

安装

npm install mitt

使用

在需要使用事件总线的地方导入和创建它

import mitt from 'mitt';
const eventBus = mitt();

发送事件

要发送事件,你可以使用 eventBus.emit(eventName, payload) 方法

eventBus.emit('eventName', payload);

监听事件

eventBus.on('eventName', (payload) => {// 处理事件的回调逻辑
});

取消监听

eventBus.off('eventName', handler);

这篇关于第十节——Vue组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/306752

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',