Vue.js 中子组件向父组件传值的方法

Vue.js 是一款流行的 JavaScript 前端框架,它提供了一套完整的工具和 API,使得开发者可以更加高效地构建交互式的 Web 应用程序。其中,组件化是 Vue.js 的一个核心概念,通过组件化可以将一个复杂的应用程序拆分成多个独立的部分,每个部分都有自己的状态和行为,从而方便开发和维护。

本篇博客将介绍 Vue.js 组件化的基础知识,包括组件的定义、组件的通信、组件的生命周期等内容。我们将从头到尾地讲解这些内容,并提供详细的代码示例,帮助读者更好地理解和掌握 Vue.js 组件化的技术。

一、组件的定义

在 Vue.js 中,组件是可复用的 Vue 实例,它们可以接收相同的选项对象(例如 datamethodscomputed 等),并且可以像普通元素一样在模板中使用。组件可以嵌套使用,也可以在不同的 Vue 实例中共享。

1. 全局组件

全局组件是在 Vue 根实例中注册的组件,可以在任何 Vue 实例中使用。全局组件的注册方法是使用 Vue.component 方法,该方法接收两个参数:组件的名称和选项对象。

<template><div><my-component></my-component></div>
</template><script>
Vue.component('my-component', {template: '<div>这是一个全局组件</div>'
});
</script>

在上述代码中,我们定义了一个名为 my-component 的全局组件,并在模板中使用了该组件。当渲染组件时,Vue.js 会将组件的选项对象实例化成一个 Vue 实例,并将其挂载到模板中。

2. 局部组件

局部组件是在某个 Vue 实例中注册的组件,只能在该实例及其子组件中使用。局部组件的注册方法是在 Vue 实例的 components 选项中定义组件的名称和选项对象。

<template><div><my-component></my-component></div>
</template><script>
import MyComponent from './MyComponent.vue';export default {components: {'my-component': MyComponent}
}
</script>

在上述代码中,我们定义了一个名为 MyComponent 的局部组件,并在父组件中使用了该组件。当渲染组件时,Vue.js 会将组件的选项对象实例化成一个 Vue 实例,并将其挂载到模板中。

二、组件的通信

在 Vue.js 中,组件之间的通信是非常重要的一个功能。通信可以分为父子组件通信和兄弟组件通信两种类型。下面我们将分别介绍这两种类型的通信方式。

1. 父子组件通信

父子组件通信是指一个组件向它的直接父组件传递数据或事件,或者从它的直接父组件接收数据或事件。在 Vue.js 中,父子组件通信可以通过 props 和自定义事件两种方式实现。

props

props 是父组件向子组件传递数据的一种方式,类似于 React 中的 props。子组件通过在选项对象中定义 props 属性来声明需要接收的数据,父组件则通过在子组件标签上使用属性的方式传递数据。

<!-- 子组件 -->
<template><div><p>姓名:{{ name }}</p><p>年龄:{{ age }}</p></div>
</template><script>
export default {props: {name: String,age: Number}
}
</script><!-- 父组件 -->
<template><div><child-component :name="name" :age="age"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {name: '张三',age: 18};}
}
</script>

在上述代码中,子组件中通过 props 属性声明了需要接收的 nameage 数据。父组件中通过在子组件标签上使用属性的方式传递数据,并且数据类型需要和子组件中声明的类型一致。

自定义事件

自定义事件是子组件向父组件传递数据或事件的一种方式。子组件通过 $emit 方法触发一个自定义事件,并传递需要传递的数据,父组件则通过 v-on 指令监听该事件,并在事件处理函数中接收子组件传递的数据。

<!-- 子组件 -->
<template><div><button @click="handleClick">点击我</button></div>
</template><script>
export default {methods: {handleClick() {const data = { name: '张三', age: 18 };this.$emit('my-event', data);}}
}
</script><!-- 父组件 -->
<template><div><child-component @my-event="handleEvent"></child-component><p>接收到的数据:{{ eventData }}</p></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {eventData: null};},methods: {handleEvent(data) {this.eventData = data;}}
}
</script>

在上述代码中,子组件中的 handleClick 方法触发了一个名为 my-event 的自定义事件,并传递了一个数据对象。父组件中使用 v-on 指令监听了该事件,并在事件处理函数中接收了子组件传递的数据,并将其赋值给 eventData 变量。最后,在父组件的模板中使用插值语法显示接收到的数据。

2. 兄弟组件通信

兄弟组件通信是指两个没有直接父子关系的组件之间进行数据或事件的传递。在 Vue.js 中,兄弟组件通信可以通过一个共同的父组件来实现,具体步骤如下:

  1. 在共同的父组件中定义一个数据对象,并将其作为 props 分别传递给两个兄弟组件。
   <!-- 父组件 --><template><div><child-component-1 :data="sharedData"></child-component-1><child-component-2 :data="sharedData"></child-component-2></div></template><script>import ChildComponent1 from './ChildComponent1.vue';import ChildComponent2 from './ChildComponent2.vue';export default {components: {ChildComponent1,ChildComponent2},data() {return {sharedData: { name: '张三', age: 18 }};}}</script>
  1. 在兄弟组件中分别通过 props 接收父组件传递的数据,并在需要修改数据时触发一个自定义事件。
   <!-- 兄弟组件 1 --><template><div><p>姓名:{{ data.name }}</p><p>年龄:{{ data.age }}</p><button @click="handleChange">修改姓名</button></div></template><script>export default {props: {data: Object},methods: {handleChange() {this.$emit('change-name', '李四');}}}</script><!-- 兄弟组件 2 --><template><div><p>姓名:{{ data.name }}</p><p>年龄:{{ data.age }}</p></div></template><script>export default {props: {data: Object},mounted() {this.$parent.$on('change-name', name => {this.data.name = name;});}}</script>

在上述代码中,父组件中定义了一个名为 sharedData 的数据对象,并将其作为 props 分别传递给了两个兄弟组件。兄弟组件 1 中通过 $emit 方法触发了一个名为 change-name 的自定义事件,并传递了一个新的姓名值。兄弟组件 2 中通过 mounted 钩子函数监听了父组件中触发的 change-name 事件,并在事件处理函数中修改了 data 对象中的姓名值。

三、组件的生命周期

在 Vue.js 中,每个组件都有自己的生命周期,包括创建、挂载、更新和销毁等阶段。组件的生命周期可以通过一些钩子函数来控制和管理,这些钩子函数可以在组件的选项对象中定义。

1. 创建阶段

创建阶段是指组件实例被创建出来后的一系列操作,包括实例化、数据初始化、模板编译等过程。在创建阶段中,Vue.js 会依次调用以下钩子函数:

beforeCreate

该钩子函数在组件实例被创建之前被调用,此时组件的选项对象已经被解析,但是组件实例还没有被创建。

<template><div>{{ message }}</div>
</template><script>
export default {beforeCreate() {console.log('beforeCreate');},data() {return {message: 'Hello, Vue!'};}
}
</script>

在上述代码中,我们在组件选项对象中定义了一个 beforeCreate 钩子函数,并在该函数中输出了一条日志信息。当组件实例被创建之前,该钩子函数会被调用并输出日志信息。

created

该钩子函数在组件实例被创建之后被调用,此时组件实例已经被创建,但是还没有被挂载到页面中。

<template><div>{{ message }}</div>
</template><script>
export default {created() {console.log('created');},data() {return {message: 'Hello, Vue!'};}
}
</script>

在上述代码中,我们在组件选项对象中定义了一个 created 钩子函数,并在该函数中输出了一条日志信息。当组件实例被创建之后,该钩子函数会被调用并输出日志信息。

2. 挂载阶段

挂载阶段是指组件实例被创建后,将其挂载到页面中的过程。在挂载阶段中,Vue.js 会依次调用以下钩子函数:

beforeMount

该钩子函数在组件实例被挂载到页面之前被调用,此时组件实例已经被创建,但是还没有被挂载到页面中。

<template><div>{{ message }}</div>
</template><script>
export default {beforeMount() {console.log('beforeMount');},data() {return {message: 'Hello, Vue!'};}
}
</script>

在上述代码中,我们在组件选项对象中定义了一个 beforeMount 钩子函数,并在该函数中输出了一条日志信息。当组件实例被挂载到页面之前,该钩子函数会被调用并输出日志信息。

mounted

该钩子函数在组件实例被挂载到页面之后被调用,此时组件实例已经被挂载到页面中。

<template><div>{{ message }}</div>
</template><script>
export default {mounted() {console.log('mounted');},data() {return {message: 'Hello, Vue!'};}
}
</script>

在上述代码中,我们在组件选项对象中定义了一个 mounted 钩子函数,并在该函数中输出了一条日志信息。当组件实例被挂载到页面之后,该钩子函数会被调用并输出日志信息。

3. 更新阶段

更新阶段是指组件实例的数据发生变化后,将其重新渲染到页面中的过程。在更新阶段中,Vue.js 会依次调用以下钩子函数:

beforeUpdate

该钩子函数在组件实例的数据发生变化后,重新渲染之前被调用。

<template><div>{{ message }}</div><button @click="handleClick">点击我</button>
</template><script>
export default {beforeUpdate() {console.log('beforeUpdate');},data() {return {message: 'Hello, Vue!'};},methods: {handleClick() {this.message = 'Hello, World!';}}
}
</script>

在上述代码中,我们在组件选项对象中定义了一个 beforeUpdate 钩子函数,并在该函数中输出了一条日志信息。当组件实例的数据发生变化后,重新渲染之前,该钩子函数会被调用并输出日志信息。

updated

该钩子函数在组件实例的数据发生变化后,重新渲染之后被调用。

<template><div>{{ message }}</div><button @click="handleClick">点击我</button>
</template><script>
export default {updated() {console.log('updated');},data() {return {message: 'Hello, Vue!'};},methods: {handleClick() {this.message = 'Hello, World!';}}
}

在上述代码中,我们在组件选项对象中定义了一个 updated 钩子函数,并在该函数中输出了一条日志信息。当组件实例的数据发生变化后,重新渲染之后,该钩子函数会被调用并输出日志信息。

4. 销毁阶段

销毁阶段是指组件实例被销毁的过程,包括从页面中移除、解绑事件、销毁子组件等操作。在销毁阶段中,Vue.js 会依次调用以下钩子函数:

beforeDestroy

该钩子函数在组件实例被销毁之前被调用。

<template><div>{{ message }}</div><button @click="handleClick">点击我</button>
</template><script>
export default {beforeDestroy() {console.log('beforeDestroy');},data() {return {message: 'Hello, Vue!'};},methods: {handleClick() {this.$destroy();}}
}
</script>

在上述代码中,我们在组件选项对象中定义了一个 beforeDestroy 钩子函数,并在该函数中输出了一条日志信息。当组件实例被销毁之前,该钩子函数会被调用并输出日志信息。

destroyed

该钩子函数在组件实例被销毁之后被调用。

<template><div>{{ message }}</div><button @click="handleClick">点击我</button>
</template><script>
export default {destroyed() {console.log('destroyed');},data() {return {message: 'Hello, Vue!'};},methods: {handleClick() {this.$destroy();}}
}
</script>

在上述代码中,我们在组件选项对象中定义了一个 destroyed钩子函数,并在该函数中输出了一条日志信息。当组件实例被销毁之后,该钩子函数会被调用并输出日志信息。

生命周期图示

下面是 Vue.js 组件生命周期的图示:

在这里插入图片描述

从图中可以看出,Vue.js 组件生命周期包括以下几个阶段:

  1. 创建阶段:包括 beforeCreatecreatedbeforeMountmounted 四个钩子函数。
  2. 更新阶段:包括 beforeUpdateupdated 两个钩子函数。
  3. 销毁阶段:包括 beforeDestroydestroyed 两个钩子函数。

其中,创建阶段和销毁阶段只会在组件实例创建和销毁时触发一次;而更新阶段会在组件实例数据发生变化时被触发多次。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/659976.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统架构设计师考试大纲2023

一、 考试方式&#xff08;机考&#xff09; 考试采取科目连考、 分批次考试的方式&#xff0c; 连考的第一个科目作答结束交卷完成后自动进 入第二个科目&#xff0c; 第一个科目节余的时长可为第二个科目使用。 高级资格&#xff1a; 综合知识科目考试时长 150 分钟&#xff…

基于ecal的foxglove studio可视化工具的使用

ecal通讯在自动驾驶和机器人中的应用越来越多,在调试测试过程中,可以使用ecal monitor,ecal recoder和ecal player等工具,对ecal 消息进行监测录制回播。但是,有时候需要对消息进行可视化查看,比如雷达点云信息,相机图像等,可以使用foxglove studio可视化工具。 Foxg…

行为型设计模式—命令模式

命令模式&#xff1a;它通过将请求封装为一个独立的对象即命令对象&#xff0c;来解耦命令的调用者和接收者&#xff0c;使得调用者和接收者不直接交互。在命令对象里会包含请求相关的全部信息&#xff0c;每一个命令都是一个操作的请求&#xff1a; 请求方发出请求要求执行一个…

CSRF靶场练习

简述&#xff1a;CSRF漏洞实际很少&#xff1b;条件限制很多&#xff1b;局限性很大&#xff1b;实验仅供参考&#xff0c;熟悉csrf概念和攻击原理即可 Pikachu靶场 CSRF GET 登录用户vince的账户可以看到用户的相关信息&#xff1b; 点击修改个人信息&#xff0c;发现数据包…

轻量式RPC调用日志链路设计方案

导语: 调用链跟踪系统,又称为tracing&#xff0c;是微服务设计架构中&#xff0c;从系统层面对整体的monitoring和profiling的一种技术手 背景说明 由于我们的项目是微服务方向&#xff0c;中后台服务调用链路过深&#xff0c;追踪路径过长&#xff0c;其中某个服务报错或者异…

【Redis】实现购物秒杀及分布式锁

Redis实现购物秒杀及分布式锁 全局唯一ID Redis自增ID策略 ID构造是:时间戳 + 计数器 每天一个key,方便统计订单量 业务实现 获取指定时间的秒数 LocalDateTime timeBegin = LocalDateTime.of(2024, 1, 1, 0, 0, 0); long second = timeBegin.toEpochSecond(ZoneOffset…

Redis stream特性了解

在发布订阅中我们了解到发布订阅模式存在的无法持久化保存消息和对于离线重连的客户端不能读取历史消息的缺陷&#xff0c;以下就来了解一下stream是如何解决这个问题的 steam是类似于仅添加log的数据结构&#xff0c;提供了以下基本命令 XADD: 添加新条目到stream # 语法xadd…

Java面试题宝典(万字长文)

Java 基础 1. JDK 和 JRE 有什么区别&#xff1f; JRE是Java运行环境&#xff0c;即&#xff08;Java Runtime Environment&#xff09;&#xff0c;也就是Java平台。所有的Java程序都要在JRE下才能运行。 JDK是开发工具包&#xff0c;即&#xff08;Java Development Kit&am…

Python——turtle库笔记②

填充颜色 turtle.fillcolor(colorstring) turtle.fillcolor() turtle.fillcolor((r, g, b)) turtle.fillcolor(r, g, b) 填充 turtle.filling() #返回填充状态 (填充为 True&#xff0c;否则为 False)。 turtle.begin_fill() #在绘制要填充的形状之前调用 turtle.end_fill()…

【Docker与微服务】基础篇

1 Docker简介 1.1 docker是什么 1.1.1 问题&#xff1a;为什么会有docker出现&#xff1f; 假定您在开发一个项目&#xff0c;您使用的是一台笔记本电脑而且您的开发环境具有特定的配置。其他开发人员身处的环境配置也各有不同。您正在开发的应用依赖于您当前的配置且还要依…

数据结构与算法面试系列-02

1. 一个整数,它加上100后是一个完全平方数,加上168又是一个完全平方数,请问该数是多少? 程序分析:在10万以内判断,先将该数加上100后再开方,再将该数加上168后再开方,如果开方后的结果满足如下条件,即是结果。请看具体分析: 程序代码如下: package com.yoodb.uti…

js获取dom元素的宽度数值

有的时候我们需要依赖元素的具体的宽高数值&#xff0c;那这个时候就需要你来进行调用了相关的api进行获取了 这个需要搭配 getComputedStyle getPropertyValue <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&…

android 自定义下拉框

一、 简介&#xff1a; 原生Android 提供的spinner下拉框不怎么方便&#xff0c;样式有点丑。修改起来麻烦&#xff0c;于是就自己动手写了一下拉列表。 实现原理使用的是&#xff0c;popwindow弹框&#xff0c;可实现宽高自定义&#xff0c;下拉列表使用listview. 二、pop弹框…

vue3兼容超宽屏、超窄屏、4K屏幕等等

vue3兼容超宽屏、超窄屏、4K屏幕等等 在你的项目src下创建一个hooks文件夹 在里面创建一个 UserScalePage.ts文件 在里面写上 import { onMounted, onUnmounted } from "vue"; import _ from "lodash"; export default function UserScalePage(opstion: …

大模型基础架构的变革:剖析Transformer的挑战者(中)

上一篇文章中&#xff0c;我们介绍了RetNet、RWKV、Mamba等有可能会替代Transformer的模型架构&#xff0c;这一篇文章我们将要介绍另外三个有可能会替代Transformer的模型架构&#xff0c;它们分别是UniRepLKNet、StripedHyena、PanGu-π&#xff0c;想了解之前的内容&#xf…

vue项目改造服务端渲染

vue项目改造服务端渲染 概述 【定义】 服务器渲染的Vue应用程序被认为是"同构"或"通用"&#xff0c;因为应用程序的大部分代码都可以在服务器和客户端上运行 【优点】 与传统SPA相比&#xff0c;服务器端渲染(SSR)的优势主要在于&#xff1a; 1、更好的…

二叉树-堆应用(1)

目录 堆排序 整体思路 代码实现 Q1建大堆/小堆 Q2数据个数和下标 TopK问题 整体思路 代码实现 Q1造数据CreateData Q2建大堆/小堆 建堆的两种方法这里会用到前面的向上/向下调整/交换函数。向上调整&向下调整算法-CSDN博客 堆排序 整体思路 建堆&#xff08;直…

【硬件产品经理】锂电池充电时间怎么计算?

目录 前言 电池容量 充电器功率 电能转换效率 充电时间计算 作者简介<

LeetCode2670. 找出不同元素数目差数组:哈希表(预处理)

【LetMeFly】2670.找出不同元素数目差数组&#xff1a;哈希表&#xff08;预处理&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/find-the-distinct-difference-array/ 给你一个下标从 0 开始的数组 nums &#xff0c;数组长度为 n 。 nums 的 不同元素…

Qt 5.9.4 转 Qt 6.6.1 遇到的问题总结(三)

1.QSet: toList 中的toList 函数已不存在&#xff0c;遇到xx->toList改成直接用&#xff0c;如下&#xff1a; 2.开源QWT 图形库中QwtDial中的 setPenWidth 变成 setPenWidthF函数。 3.QDateTime 中无setTime_t 改为了setSecsSinceEpoch函数。 4.QRegExp 类已不存在 可以用Q…