【Vue笔记】Vue组件的创建、使用以及父子组件数据通信常见的几种方式

最新推荐文章于 2023-06-30 14:00:00 发布
最新推荐文章于 2023-06-30 14:00:00 发布
阅读量416 收藏
点赞数 1
分类专栏： Web前端笔记 文章标签： vue.js 前端 Vue组件 父子组件数据交互 Vue组件通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39826207/article/details/128680375
版权

这篇文章，主要介绍Vue组件的创建、使用以及父子组件数据通信常见的几种方式。

目录

一、Vue组件的使用

1.1、局部组件

1.2、全局组件

1.3、动态组件（组件动态切换）

1.4、缓存组件

（1）如何缓存组件

（2）如何更新组件

1.5、父组件传递数据给子组件

（1）props属性传递数据

（2）props数据类型校验

1.6、子组件回传数据给父组件

1.7、子组件回调父组件方法

一、Vue组件的使用

1.1、局部组件

  • 局部组件：创建的组件只能够在当前Vue实例中使用，作用域更小。
  • 局部组件的注册：
    • 第一步：定义局部组件对象，对象里面使用【template】属性定义组件的模板，当组件里面也可以使用其他Vue的所有属性和方法。
    • 第二步：在Vue实例里面，使用【components】属性注册局部组件。
<!DOCTYPE html>
<html lang="en">
<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
2021-10-21 vue笔记-组件化开发(四) 组建通信:非父子通信-事件总线,在vue项目中使用eventbus的例子
GAARA
10-21 175
1、初始化，创建一个事件总线并导出，以便其他模块可以使用并监听它； // eventBus.js import Vue from 'vue' //通过一个空的Vue实例作为中央事件总线（事件中心） export const EventBus = new Vue() 2、导入eventBus，使用$emit发送数据； 3、导入$on，使用$on接收数据； 4、如果想移除事件，可以先导入eventBus，通过$off移除；（eventBus.$off ( 'add', {} )）
11.vue3组件化开发(父子组件之间的通信)
phoebemeng的博客
09-01 491
学习笔记:组件的嵌套和拆分;父子组件之间的通信;商品栏切换的案例
Vue父子组件创建
qq_36358940的博客
09-04 1709
1.首先搭建vue-cli简易脚手架：搭建步骤 2.在src目录下新建Component文件夹 3.在Component下新建父组件页面User.vue,在Component下新建子组件页面main.vue 4.mian.vue页面中代码如下：<template> //注意：template下方只能有一个根元素 <div>我是子组件 mian页面</div> </temp
vue之创建父子组件
weixin_44474200的博客
05-18 648
我认为就是父子调用，如果会一门语言的话就比较好理解。 理解为作用域，父可以调用子的组件。爷爷可以调用父组件， 但是如果想要爷爷组件成功调用孙组件，必须在爷爷组件内都注册一遍。否则会报错。 <div id="app"> <cpn2></cpn2> <cpn1></cpn1> </div> <script> //先创建子组件 const cpnC1 = Vue.extend({
Vue组件的创建与使用，描述简单，容易学习
qq_44890362的博客
12-04 602
1.学过或者正在学习vue的小伙伴一定十分清楚，组件在vue框架里面的重要性吧 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 现在让我们一起来学习如何创建和使用vue的组件吧，在创建组件之前先引入vue.js。 2.全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
22.Vue.js :父子组件的创建
人间清醒
03-23 699
<!DOCTYPE html> <html lang="en"> <head> <title>父子组件的创建</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
vue父子组件
remwnber的博客
08-30 161
父与子的交互问题，这里我用的是老师与学生。 老师（父组件）传学生（子组件） 1.先建立一个子组件。 2.给子组件定义一个值。 3.声明定义的这个值。 这里注意props与data同级 效果如图： 学生（子组件）传老师（父组件） 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，
vue学习笔记之给组件绑定原生事件操作示例
10-15
在Vue.js中，组件是构建应用的核心元素，它们可以封装逻辑和视图，方便复用。...使用`native`修饰符是Vue.js中处理组件原生事件的一种优雅且实用的方式，对于理解和优化Vue应用程序的事件处理流程至关重要。
vue基础学习笔记 --- 组件间数据的传输方式（7种，vue2环境下）
MImi_0612的博客
08-07 1263
vue组件间传值的7中方法：props、自定义事件、$bus、pubsub-js、vuex、插槽slot、provide和inject跨组件传值
js vue 创建一个div_Vue 创建组件的两种方法小结(必看)
weixin_39637457的博客
12-19 660
创建组件的两种方法小结1.全局注册2.局部注册var child=vue.extend({})var parent=vue.extend({})vue.extend() 全局方法 生成构造器，创建子类使用基础 vue 构造器，创建一个“子类”。这样写非常繁琐。于是vue进行了简化使用vue.component()直接创建和注册组件：vue.component(id,options) 全局方法 用来...
父子组件的创建和挂载的顺序
Kratial的博客
09-11 739
问题关于父组件以及嵌套的子组件创建和挂载的顺序是怎么样的呢？如下图所示：
[Vue] 14.Vue中的组件：创建子组件以及在父组件中用子组件
u014627255的博客
06-10 1967
Vue的全局子组件与局部子组件
vue-父子组件执行流程
weixin_44754351的博客
06-10 175
创建初始化阶段： 父：beforeCreate 父：created 父：beforeMount 子：beforeCreate 子：created 子：beforeMount 子：mounted 父：mounted 更新组件阶段： 父：beforeUpdate 子：beforeUpdate 子：updated 父：updated 销毁阶段： 父：beforeDestroy 子：beforeDestroy 子：destroyed 父：destroyed ...
Vue中父组件如何控制子组件的值
最新发布
pleaseprintf的博客
06-30 7727
在Vue开发中，父组件和子组件之间的数据传递是一项常见的任务。本文将介绍如何在Vue中实现父组件控制子组件的值，以便灵活地管理和更新子组件的数据。Vue中通过props属性可以实现父组件向子组件传递数据，但是如果我们希望父组件能够直接控制子组件的值，就需要使用.sync修饰符或者自定义事件来实现双向绑定。下面我们将详细介绍两种方法。1.在子组件中，定义一个props属性，用于接收父组件的值。例如，子组件的props属性名为value。2.在子组件内部，使用emit。
父子组件创建
weixin_42442123的博客
01-04 414
&lt;body&gt; &lt;div id="app"&gt; &lt;father&gt;&lt;/father&gt; &lt;/div&gt; &lt;script&gt; // 创建一个fahter组件 Vue.component('father', { template: `&
Vue组件和组件通信
大鹏的博客
12-27 82
在当前组件的style加上scoped属性,就会在此组件的标签上加一个随机生成的data-v-hash开头的自定义属性,而且必须是当前组件的元素,才会有这个自定义属性,把属性选择器变成交集选择器。props校验: props是父传子,传递给子组件的数据,为了提高子组件被使用时的稳定性,可以进行props校验,验证传递的数据是否符合要求。APP.vue是根组件,比较特殊,是最大的根组件,里面还可以注册其他的组件。组件化封装思想,把页面上可要重复的部分封装为组件,方便项目开发和维护,
Vue - 组件间的数据通信（数据传递/共享）
weixin_41606115的博客
02-14 275
一种组件间通信的方式，适用于：子组件 ===> 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中 ）。绑定自定义事件：第一种方式，在父组件中： 或 ......mounted(){若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。触发自定义事件：this.$emit('atguigu',数据)
Vue 父子组件应用指南：从基础到实战
weixin_43749805的博客
06-14 4199
Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。其中，父子组件的概念是 Vue 开发中非常重要的一部分。本文将介绍如何使用 Vue 创建父子组件，并通过代码来分析实际应用。
Vue(三)组件
a_wtf_pgm的博客
07-18 315
                                                       全局组件 *组件里面放数据:         data必须是函数的形式，函数必须返回一个对象(json) 另一种编写方式（常用） 在Vue2.0中 1. 在每个组件模板，不在支持片段代码     组件中模板:         之前:             &lt;temp...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.小朱同学

随心赞赏，助力前行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值