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

2024-02-01 20:12
文章标签 javascript 方法 组件 vue js 传值 frontend 中子 向父

本文主要是介绍Vue.js 中子组件向父组件传值的方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

一、组件的定义

在 Vue.js 中，组件是可复用的 Vue 实例，它们可以接收相同的选项对象（例如 data、methods、computed 等），并且可以像普通元素一样在模板中使用。组件可以嵌套使用，也可以在不同的 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 属性声明了需要接收的 name 和 age 数据。父组件中通过在子组件标签上使用属性的方式传递数据，并且数据类型需要和子组件中声明的类型一致。

自定义事件

自定义事件是子组件向父组件传递数据或事件的一种方式。子组件通过 $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. 创建阶段：包括 beforeCreate、created、beforeMount 和 mounted 四个钩子函数。
  2. 更新阶段：包括 beforeUpdate 和 updated 两个钩子函数。
  3. 销毁阶段：包括 beforeDestroy 和 destroyed 两个钩子函数。

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

这篇关于Vue.js 中子组件向父组件传值的方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/668340。

相关文章

Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
MySQL数据库双机热备的配置方法详解

MySQL数据库双机热备的配置方法详解

《MySQL数据库双机热备的配置方法详解》在企业级应用中,数据库的高可用性和数据的安全性是至关重要的,MySQL作为最流行的开源关系型数据库管理系统之一,提供了多种方式来实现高可用性,其中双机热备（M... 目录1. 环境准备1.1 安装mysql1.2 配置MySQL1.2.1 主服务器配置1.2.2 从
阅读更多...
vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Python版本信息获取方法详解与实战

Python版本信息获取方法详解与实战

《Python版本信息获取方法详解与实战》在Python开发中,获取Python版本号是调试、兼容性检查和版本控制的重要基础操作,本文详细介绍了如何使用sys和platform模块获取Python的主... 目录1. python版本号获取基础2. 使用sys模块获取版本信息2.1 sys模块概述2.1.1
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
Python实现字典转字符串的五种方法

Python实现字典转字符串的五种方法

《Python实现字典转字符串的五种方法》本文介绍了在Python中如何将字典数据结构转换为字符串格式的多种方法,首先可以通过内置的str()函数进行简单转换;其次利用ison.dumps()函数能够... 目录1、使用json模块的dumps方法：2、使用str方法：3、使用循环和字符串拼接：4、使用字符
阅读更多...
Python版本与package版本兼容性检查方法总结

Python版本与package版本兼容性检查方法总结

《Python版本与package版本兼容性检查方法总结》：本文主要介绍Python版本与package版本兼容性检查方法的相关资料,文中提供四种检查方法,分别是pip查询、conda管理、PyP... 目录引言为什么会出现兼容性问题方法一：用 pip 官方命令查询可用版本方法二：conda 管理包环境方法
阅读更多...
Linux云服务器手动配置DNS的方法步骤

Linux云服务器手动配置DNS的方法步骤

《Linux云服务器手动配置DNS的方法步骤》在Linux云服务器上手动配置DNS（域名系统）是确保服务器能够正常解析域名的重要步骤,以下是详细的配置方法,包括系统文件的修改和常见问题的解决方案,需要... 目录1. 为什么需要手动配置 DNS？2. 手动配置 DNS 的方法方法 1：修改 /etc/res
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2