Vue组件间的传值五大场景,你造吗?
摘要:组件是 vue.js最强大的功能之一,这五个组件间传值场景你了解吗?
本文分享自华为云社区《你了解Vue组件间传值五大场景吗?》,作者:北极光之夜。 。
父组件向子组件传值:
比如有一个 Father.vue 的父组件要传值给 Children.vue 的子组件,完成共需四步:
父组件 Father.vue 内容,注意里面的操作步骤:
<template> <div> <h2>父组件区域</h2> <hr /> <!-- 第二步:在引用的子组件标签里定义 :num="num" , num就是要传递的变量--> <Children :num="num"></Children> </div> </template> <script> // 引入子组件 import Children from "./Children.vue"; export default { data() { return { // 第一步:我们将要把变量 num 的值传给子组件Children num: 666, }; }, components: { Children, }, }; </script>
子组件 Children.vue 内容,注意里面的操作步骤:
<template> <div> <h2>子组件区域</h2> <!-- 第四步:在子组件显示父组件传过来的值 --> <i>父组件传递过了的值:{{ num }}</i> </div> </template> <script> export default { //第三步: 子组件可以通过定义的props就可以接收来自父组件的变量值 num props: ["num"], data() { return {}; }, }; </script>
运行效果:
子组件向父组件传值:
比如有一个 Children.vue 的子组件要传值给 Father.vue 的父组件,完成共需六步:
子组件 Children.vue 内容,注意里面的操作步骤:
<template> <div> <h2>子组件区域</h2> <!-- 第二步:得定义一个向父组件传值的方法,比如定义一个按钮, 绑定一个点击事件,触发giveFather方法 --> <button @click="giveFather">giveFather</button> </div> </template> <script> export default { data() { return { // 第一步:我们将要把变量 word 的值传给父组件 word: "北极光之夜。", }; }, methods: { // 第三:定义子组件向父组件传值的事件方法 giveFather() { // 第四步:可以通过$emit传值给父组件,第一个参数为传值的方法,第二个参数为要传递的值 this.$emit("giveFather", this.word); }, }, }; </script>
父组件 Father.vue 内容,注意里面的操作步骤:
<template> <div> <h2>父组件区域</h2> <hr /> <!-- 第五步:要在引用的子组件标签里定义一个自定义事件, 该自定义事件要写为子组件$emit的第一个参数一样, 然后双引号里的方法可以自定义,我这就为getSon --> <Children @giveFather="getSon"></Children> </div> </template> <script> // 引入子组件 import Children from "./Children.vue"; export default { data() { return {}; }, components: { Children, }, methods: { //第六步:定义获取子组件值的方法,该方法的参数就为子组件传递过来的值 getSon(temp) { // 控制台输出看看能不能获取 console.log(temp); }, }, }; </script>
运行效果:
兄弟组件间传值:
比如有一个 Father.vue 的父组件,它有一个Children.vue 的子组件和一个Son.vue 的子组件,那么,Children.vue 和 Son.vue 就是兄弟关系,现在 Children.vue 要向兄弟 Son.vue 传值:
首先在vue原型上定义一个新的实例,main.js文件内容,注意里面的操作步骤:
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // 第一步,在vue原型上定义一个自己的方法,一般叫$bus,为vue实例 Vue.prototype.$bus = new Vue(); new Vue({ render: h => h(App), }).$mount('#app')
Children.vue 内容,注意里面的操作步骤:
<template> <div> <h2>Children子组件区域</h2> <!-- 第三步:定义一个向兄弟组件传值的方法,比如定义一个按钮, 绑定一个点击事件,触发giveSon方法 --> <button @click="giveSon">giveSon</button> </div> </template> <script> export default { data() { return { // 第二步:我们将要把变量 word 的值传给兄弟组件 word: "北极光之夜。", }; }, methods: { // 第四:定义子组件向兄弟组件传值的事件方法 giveSon() { // 第五步:可以通过自定义的$bus的$emit传值给兄弟组件, //第一个参数为传值的方法,第二个参数为要传递的值 this.$bus.$emit("giveSon", this.word); }, }, }; </script>
Son.vue 内容,注意里面的操作步骤:
<template> <div> <h2>Son子组件区域</h2> </div> </template> <script> export default { data() { return {}; }, created() { //第六步:通过$on方法进行获取兄弟传递过来的值。 //第一个参数为兄弟组件传值的方法,第二个参数是自定义的方法 this.$bus.$on("giveSon", this.getSon); }, methods: { //第七步,自定义的方法,参数就是兄弟传过来的值 getSon(temp) { //输出看看 console.log(temp); }, }, }; </script>
运行效果:
使用Vuex状态机传值:
Vuex是实现组件全局状态(数据)管理的一种机制,可以很方便的实现组件之间数据的共享。
关于Vuex的详细使用,可以看这篇文章,指路?:https://auroras.blog.csdn.net/article/details/117536679
给后代组件传值,provide和inject:
比如有一个 Father.vue 的父组件,它有一个Children.vue 的子组件,那么这个Children.vue 的子组件是他的后代。而若Children.vue 也有一个子组件 grandSon.vue,那么grandSon.vue 就相当于 Father.vue的孙子组件,同样,grandSon.vue也会是Father.vue的后代。以此类推,它的孙子,孙子的孙子等等都是它后代。现在我们实现Father.vue 给它的后代grandSon.vue孙子组件传值:
父组件 Father.vue 内容,注意里面的操作步骤:
<template> <div> <h2>父组件区域</h2> <hr /> <Children></Children> </div> </template> <script> // 引入子组件 import Children from "./Children.vue"; export default { data() { return { // 第一步:定义一个变量,我们将要把变量 num 的值传给后代组件grandSon.vue num: "北极光之夜", }; }, // 第二步,定义一个provide函数 provide() { //第三步,如下定义,给后代接收 //giveAfter名称为自己定义,任意起,this固定写法 return { giveAfter: this, }; }, components: { Children, }, }; </script>
子组件Children.vue 内容,没什么,引入子组件就行:
<template> <div> <h2> Children子组件区域 <hr /> <Grand-son></Grand-son> </h2> </div> </template> <script> // 引入子组件 import GrandSon from "./GrandSon.vue"; export default { data() { return {}; }, components: { GrandSon, }, }; </script>
孙子组件GrandSon.vue 内容,注意里面的操作步骤:
<template> <div> GrandSon孙子组件区域 <!-- 第六步:展示数据 --> <i> {{ num }}</i> </div> </template> <script> export default { //第四步:定义inject,里面写祖先组件自定义的名称 inject: ["giveAfter"], data() { return { // 第五步:取得祖先组件传的值,this.giveAfter.要传递值的变量名 //赋值给num num: this.giveAfter.num, }; }, }; </script>
看运行效果,成功获取:
相关文章
- 链表常见面试题
- 二叉树常见面试题
- Android开发——设置界面的创建
- Android 双击退出程序实现(有侧滑界面)
- HelloWorld改编,仿bilibili手机端(一)——侧滑菜单界面布局
- .NET面试题解析(07)-多线程编程与线程同步
- .NET面试题解析(11)-SQL语言基础及数据库基本原理
- .NET面试题解析(06)-GC与内存管理
- .NET面试题解析(05)-常量、字段、属性、特性与委托
- .NET面试题解析(04)-类型、方法与继承
- .NET面试题解析(03)-string与字符串操作
- .NET面试题解析(02)-拆箱与装箱
- .NET面试题解析(01)-值类型与引用类型
- .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引
- 动态范围控制原理
- 论文翻译:2022_DNS_1th:Multi-scale temporal frequency convolutional network with axial attention for speech enhancement
- 论文翻译:2022_DeepFilterNet2: Towards Real-Time Speech Enhancement On Embedded Devices For Fullband Audio
- Pytorch模型量化
- Tensorflow Lite从入门到精通
- 语音和噪声相关数据集(持续更新)