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 两个钩子函数。

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

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

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

相关文章

简述MinewSemi的GNSS模块引领体育与健康科技革新

简述MinewSemi的GNSS模块引领体育与健康科技革新

体育与健康科技领域的创新一直在推动人们更健康、更活跃的生活方式。创新微公司的GNSS模块正成为这一变革的关键推动力。本文将深入研究MinewSemi的GNSS模块在体育和健康追踪领域的创新应用&#xff0c;探讨其如何帮助个体更全面地了解和改善自己的身体状态。 1. 个性化运动轨迹…
阅读更多...
UnitySahder实现Phong/BlinnPhong模型

UnitySahder实现Phong/BlinnPhong模型

目录 Phong模型公式&#xff1a; BlinnPhong模型公式&#xff1a; 实现&#xff1a; Phong模型&#xff1a; BlinnPhong模型&#xff1a; Phong模型公式&#xff1a; 结果自发光&#xff0b;环境光漫反射高光反射 BlinnPhong模型公式&#xff1a; 对Phong模型的简单修改&…
阅读更多...
# Redis 分布式锁如何自动续期

# Redis 分布式锁如何自动续期

Redis 分布式锁如何自动续期 何为分布式 分布式&#xff0c;从狭义上理解&#xff0c;也与集群差不多&#xff0c;但是它的组织比较松散&#xff0c;不像集群&#xff0c;有一定组织性&#xff0c;一台服务器宕了&#xff0c;其他的服务器可以顶上来。分布式的每一个节点&…
阅读更多...
拓扑排序算法

拓扑排序算法

操作对象&#xff1a;AOV网的点和边 有向无环图&#xff1a;有向图且不会形成回路 AOV网&#xff1a;在一个表示工程的有向图中&#xff0c;用顶点表示活动&#xff0c;用弧表示活动之间的优先关系&#xff0c;这样的有向图为顶点表示活动的网&#xff0c;称为AOV网 拓扑排序…
阅读更多...
Web3生态系统：构建去中心化的数字社会

Web3生态系统：构建去中心化的数字社会

随着科技的飞速发展&#xff0c;我们正处在迈向数字未来的道路上&#xff0c;而Web3生态系统则成为这一变革的中心。不仅仅是技术的演进&#xff0c;Web3代表着对传统互联网体系的颠覆&#xff0c;致力于构建一个去中心化的数字社会。本文将深入探讨Web3的核心特征、对金融、社…
阅读更多...
2024年美赛A题：资源可用性和性别比例 Resource Availability and Sex Ratios 思路模型代码解析

2024年美赛A题：资源可用性和性别比例 Resource Availability and Sex Ratios 思路模型代码解析

2024年美赛A题&#xff1a;资源可用性和性别比例 Resource Availability and Sex Ratios 思路模型代码解析 【点击最下方群名片&#xff0c;加入群聊&#xff0c;获取更多思路与代码哦~】 问题翻译 虽然一些动物物种存在于通常的雄性或雌性之外&#xff0c;但大多数物种在很大…
阅读更多...
Linux系统Shell脚本-----------正则表达式 文本三剑客之---------grep、 sed

Linux系统Shell脚本-----------正则表达式 文本三剑客之---------grep、 sed

一、正则表达式 1.前言 正则表达式(regular expression)描述了一种字符串匹配的模式&#xff08;pattern&#xff09;&#xff0c;可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。在Linux中也就是代表我们定义的模式模板&…
阅读更多...
“错误: 不支持发行版本 XX”的解决方法

“错误: 不支持发行版本 XX”的解决方法

目录 1 查看Project Structure 1.1 打开Project Structure 1.2 查看Project Setting/Project 1.3 查看 Project Setting/Modules 1.4 查看Platform Setting/SDKs 2 查看Settings 2.1 打开Settings 2.2 查看Java Compiler 2.3 查看Maven/Runner 3 查看pom.xml 1 查…
阅读更多...
AI算力专题：华为算力分拆：全球AI算力的第二极

AI算力专题：华为算力分拆：全球AI算力的第二极

今天分享的是AI算力系列深度研究报告&#xff1a;《AI算力专题&#xff1a;华为算力分拆&#xff1a;全球AI算力的第二极》。 &#xff08;报告出品方&#xff1a;华西计算机团队&#xff09; 报告共计&#xff1a;53页 全球龙头英伟达业绩持续高度景气&#xff0c;印证全球A…
阅读更多...
k8s安装dashboard报错CrashLoopBackOff

k8s安装dashboard报错CrashLoopBackOff

报错信息 使用kubectl get pods -A查看集群&#xff0c;出现错误&#xff1a; kubernetes-dashboard kubernetes-dashboard-xxxxxxxxxx6-2qrst 0/1 CrashLoopBackOff 6 15m查看日志后&#xff0c;发现原因&#xff1a; panic: Get "https://10…
阅读更多...
架构整洁之道-组件构建原则

架构整洁之道-组件构建原则

5 组件构建原则 大型软件系统的架构过程与建筑物修建很类似&#xff0c;都是由一个个小组件组成的。所以&#xff0c;如果说SOLID原则是用于指导我们如何将砖块砌成墙与房间的&#xff0c;那么组件构建原则就是用来指导我们如何将这些房间组合成房子的。 5.1 组件 组件是软件的…
阅读更多...
MySQL索引的原理和SQL优化策略

MySQL索引的原理和SQL优化策略

1. 索引 在InnoDB存储引擎中&#xff0c;索引分为聚簇索引和辅助索引两种类型。 聚簇索引是指基于表的主键构建的索引&#xff0c;它决定了表中数据的物理存储顺序。也就是说&#xff0c;聚簇索引中的键值按照主键的顺序来排序&#xff0c;并且每个叶子节点存储的是整个表行的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023