vue2传值方式总结 （十一种方法）

news2024/11/25 2:43:03

一.父传子传递

（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量
（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性 名”] props:{属性名:数据类型}
代码示例

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son :data='name'></son> 
  </div>
</template>

<script>
import son from "./son.vue";//导入父组件
export default {
  components: { son },//注册组件
  name: "父组件",
  data() {
    return {
      name: "Frazier", //父组件定义变量
    };
  },
};
</script>

//子组件
<template>
  <div>{{data}}</div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  props:["data"],
};
</script>

二.子传父传递

（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法 ​
（2）在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的
代码示例：

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son @lcclick="lcclick"></son>//自定义一个事件
  </div>
</template>

<script>
import son from "./son.vue"; //导入父组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {};
  },
  methods: {
    lcclick(){
      alert('子传父')
    }
  },
};
</script>


//子组件
<template>
  <div>
    <button @click="lcalter">点我</button>
  </div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  methods: {
    lcalter(){
      this.$emit('lcclick')//通过emit来触发事件
    }
  },
};
</script>

三.兄弟组件通信（bus总线）
（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例 ​
（2）在传输数据的一方引入Bus.js 然后通过Bus.e m i t ( “事件名” , " 参数 " ) 来来派发事件，数据是以 emit(“事件名”,"参数")来来派发事件，数据是以emit(“事件名”,"参数")来来派发事件，数据是以emit()的参 数形式来传递 ​
（3）在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
图片示例：

 

 

四.ref/refs（父子组件通信）

（1）ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，
（2）可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种
代码示例：

 

//父组件
<template>
  <div>
    <button @click="sayHello">sayHello</button>
    <child ref="childForRef"></child>
  </div>
</template>
<script>
import child from './child.vue'
  export default {
    components: { child },
    data () {
      return {
        childForRef: null,
      }
    },
    mounted() {
      this.childForRef = this.$refs.childForRef;
      console.log(this.childForRef.name);
    },
    methods: {
      sayHello() {
        this.childForRef.sayHello()
      }
    }
  }
</script>

//子组件
<template>
  <div>child 的内容</div>
</template>
<script>
export default {
  data () {
    return {
      name: '我是 child',
    }
  },
  methods: {
    sayHello () {
      console.log('hello');
      alert('hello');
    }
  }
}
</script>

五.Vuex通信

组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态
代码示例：

//父组件
template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>
<script>
  import ChildA from './ChildA' // 导入A组件
  import ChildB from './ChildB' // 导入B组件
  export default {
    components: {ChildA, ChildB} // 注册组件
  }
</script>

//子组件A
<template>
 <div id="childA">
   <h1>我是A组件</h1>
   <button @click="transform">点我让B组件接收到数据</button>
   <p>因为点了B，所以信息发生了变化：{{BMessage}}</p>
 </div>
</template>
<script>
 export default {
   data() {
     return {
       AMessage: 'Hello，B组件，我是A组件'
     }
   },
   computed: {
     BMessage() {
       // 这里存储从store里获取的B组件的数据
       return this.$store.state.BMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveAMsg，将A组件的数据存放到store里去
       this.$store.commit('receiveAMsg', {
         AMsg: this.AMessage
       })
     }
   }
 }
</script>

//子组件B
<template>
 <div id="childB">
   <h1>我是B组件</h1>
   <button @click="transform">点我让A组件接收到数据</button>
   <p>点了A，我的信息发生了变化：{{AMessage}}</p>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       BMessage: 'Hello，A组件，我是B组件'
     }
   },
   computed: {
     AMessage() {
       // 这里存储从store里获取的A组件的数据
       return this.$store.state.AMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveBMsg，将B组件的数据存放到store里去
       this.$store.commit('receiveBMsg', {
         BMsg: this.BMessage
       })
     }
   }
 }
</script>


//vuex
import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 const state = {
   AMsg: '',
   BMsg: ''
 }
 
 const mutations = {
   receiveAMsg(state, payload) {
     // 将A组件的数据存放于state
     state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
     // 将B组件的数据存放于state
     state.BMsg = payload.BMsg
   }
 }
 
 export default new Vuex.Store({
   state,
   mutations
 })

六.$parent

通过parent可以获父组件实例 ，然 后通过这个实例就可以访问父组件的属 性和方法 ，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟root，可以获取根组件实例。
代码示例：

// 获父组件的数据
this.$parent.foo

// 写入父组件的数据
this.$parent.foo = 2

// 访问父组件的计算属性
this.$parent.bar

// 调用父组件的方法
this.$parent.baz()

//在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。

七.sessionStorage传值

sessionStorage 是浏览器的全局对象，存在它里面的数据会在页面关闭时清除 。运用这个特性，我们可以在所有页面共享一份数据。
代码示例：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

注意：里面存的是键值对，只能是字符串类型，如果要存对象的话，需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储（使用的时候 let obj = JSON.parse(objStr) 解析为对象）。
推荐一个库 good-storage ，它封装了sessionStorage ，可以直接用它的API存对象

//localStorage
 storage.set(key,val) 
 storage.get(key, def)
//sessionStorage
 storage.session.set(key, val)
 storage.session.get(key, val)

八.路由传值

使用问号传值
A页面跳转B页面时使用 this.r o u t e r . p u s h ( ’ / B ? n a m e = d a n s e e k ’ ) B 页面可以使用 t h i s . router.push(’/B?name=danseek’) B页面可以使用 this.router.push(’/B?name=danseek’)B页面可以使用this.route.query.name 来获取A页面传过来的值
上面要注意router和route的区别
使用冒号传值
配置如下路由：

{
    path: '/b/:name',
    name: 'b',
    component: () => import( '../views/B.vue')
 },

在B页面可以通过 this.$route.params.name 来获取路由传入的name的值

使用父子组件传值
由于router-view本身也是一个组件，所以我们也可以使用父子组件传值方式传值，然后在对应的子页面里加上props，因为type更新后没有刷新路由，所以不能直接在子页面的mounted钩子里直接获取最新type的值，而要使用watch

<router-view :type="type"></router-view>

// 子页面
props: ['type']
watch: {
       type(){
           // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
       },
},

九.祖传孙 $attrs

正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改
祖组件：

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from './Parent'
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>

父组件

template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from './Children'

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:['name'],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>

子组件

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:['sex','age','hobby','name'],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit('sayKnow','我知道啦')
      }
    },
    mounted() {
    }
  }
</script>

十.孙传祖使用$listeners

文字内容同第九个

祖组件

<template>
  <div id="app">
    <children-one @eventOne="eventOne"></children-one>
    {{ msg }}
  </div>
</template>
<script>
import ChildrenOne from '../src/components/children.vue'
export default {
  name: 'App',
  components: {
    ChildrenOne,
  },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    eventOne(value) {
      this.msg = value
    }
  }
}
</script>

父组件

<template>
  <div>
    <children-two v-on="$listeners"></children-two>
  </div>
</template>

<script>
import ChildrenTwo from './childrenTwo.vue'

export default {
  name: 'childrenOne',
  components: {
    ChildrenTwo
  }
}
</script>

子组件

<template>
  <div>
    <button @click="setMsg">点击传给祖父</button>
  </div>
</template>

<script>
export default {
  name: 'children',
  methods: {
    setMsg() {
      this.$emit('eventOne', '123')
    }
  }
}
</script>

十一.promise传参

promise 中 resolve 如何传递多个参数

//类似与这样使用，但实际上后面两个参数无法获取
promise = new Promise((resolve,reject)=>{
    let a = 1
    let b = 2
    let c = 3
    resolve(a,b,c) 
})
promise.then((a,b,c)=>{
    console.log(a,b,c)
})

resolve() 只能接受并处理一个参数，多余的参数会被忽略掉。
如果想多个用数组，或者对象方式。。
数组

promise = new Promise((resolve,reject)=>{
    resolve([1,2,3]) 
})
promise.then((arr)=>{
    console.log(arr[0],arr[1],arr[2])
})

对象

promise = new Promise((resolve,reject)=>{
    resolve({a:1,b:2,c:3}) 
})
promise.then(obj=>{
    console.log(obj.a,obj.b,obj.c)
})

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

golang 自定义exporter - 服务连接数 portConnCount_exporter 导出器

golang 自定义exporter - 服务连接数 portConnCount_exporter 导出器

需求&#xff1a; 1、计算当前6379 、3306 服务的连接数 2、可prometheus 语法查询 下面代码可直接使用&#xff1a; 注&#xff1a; 1、windows 与linux的区分 第38行代码 localAddr : fields[1] //windows为fields[1] &#xff0c; linux为fields[3] 2、如需求 增加/修改/删除…
阅读更多...
【山河送书第六期】:《码上行动:零基础学会Python编程( ChatGPT版)》参与活动，送书两本！！

【山河送书第六期】:《码上行动:零基础学会Python编程( ChatGPT版)》参与活动，送书两本！！

《码上行动:零基础学会Python编程( ChatGPT版》 前言内容提要本书亮点购买链接参与方式往期赠书回顾&#xff1a; 前言 在过去的 5 年里&#xff0c;Python 已经 3 次获得 TIOBE 指数年度大奖&#xff0c;这得益于数据科学和人工智能领域的发展&#xff0c;使得 Python 变得异…
阅读更多...
Openlayers实战：多数据分散聚合

Openlayers实战：多数据分散聚合

在飞机、轮船等地图显示的应用中，很多时候会用到数据聚合，Openlayers中提供了Cluster这个API ，他作为souce的一部分，设定distance值，如果2个点的间距小于 distance 所设置的数时，就会以聚合的方式显示。从而解决了数据淤积显示的状态，非常实用。 效果图 源代码 /* * @…
阅读更多...
【基础IO】动静态库 {动静态库的创建和使用；动态库的加载；默认优先使用动态链接；为什么要有库；动态链接的优缺点；静态链接的优缺点；一些有趣的库}

【基础IO】动静态库 {动静态库的创建和使用；动态库的加载；默认优先使用动态链接；为什么要有库；动态链接的优缺点；静态链接的优缺点；一些有趣的库}

动静态库 一、静态库(.a) 1.1 如何创建静态库&#xff1f; 编写源文件与头文件。注意&#xff1a;库的源文件没有main函数&#xff01; 将所有的源文件编译生成目标文件。(如果只提供.h和.o给用户&#xff0c;用户也可以成功编译运行。但这样的做法太过麻烦&#xff0c;且容易…
阅读更多...
8个值得收藏的在线3D建模工具

8个值得收藏的在线3D建模工具

如今&#xff0c;许多设计师、艺术家和建筑师尝试学习进行 3D 建模来表达他们的想法。 但 3D 建模并不总是看起来那样。 我们所有人都很难找到合适的工具&#xff0c;尤其是在学习阶段。 但不要害怕&#xff01; 你可以学习仅使用浏览器进行建模。 有许多基于浏览器的 3D 建模…
阅读更多...
Scala（第六章 面向对象）

Scala（第六章 面向对象）

文章目录 6.1 Scala包 6.1.1 包的命名6.1.2 包说明&#xff08;包语句&#xff09;6.1.3 包对象6.1.4 导包说明 6.2 类和对象 6.2.1 定义类6.2.2 属性 6.3 封装 6.3.1 访问权限6.3.2 方法6.3.3 创建对象6.3.4 构造器6.3.5 构造器参数 6.4 继承与多态6.5 抽象类 6.5.1 抽象属性和…
阅读更多...
实例034 直接在窗体上绘图

实例034 直接在窗体上绘图

实例说明 含有Graphics对象的控件都能够在其上进行绘图&#xff0c;很多软件就是通过Graphics对象来美化程序的主界面&#xff0c;因为窗体中含有Graphics对象&#xff0c;所以可以将窗体看作一个大画板&#xff0c;一个可以在上面绘图的特殊控件。本例设计了一个简单的绘图软…
阅读更多...
Pycharm 双击启动失败？

Pycharm 双击启动失败？

事故 双击 Pycharm 后&#xff0c;出现加载工程&#xff0c;我不想加载这个工程&#xff0c;就点击了弹出的 cancle 取消按钮。然后再到桌面双击 Pycharm 却发现无法启动了。哪怕以管理员权限运行也没用&#xff0c;就是不出界面。 原因未知 CtrlshiftESC 打开后台&#xff…
阅读更多...
什么是埋阻埋容工艺？

什么是埋阻埋容工艺？

PCB埋阻埋容工艺是一种在PCB板内部埋入电阻和电容的工艺。通常情况下&#xff0c;PCB上电阻和电容都是通过贴片技术直接焊接在板面上的&#xff0c;而埋阻埋容工艺则将电阻和电容嵌入到PCB板的内部层中&#xff0c;这种印制电路板&#xff0c;其自下而上依次包括第一介电层&…
阅读更多...
uniapp支付宝微信支付功能实现

uniapp支付宝微信支付功能实现

大纲&#xff1a; 具体实现逻辑如下&#xff1a; 页面初始化时&#xff0c;通过onLoad方法获取传入的钱包(wallet)信息。 用户输入充值金额&#xff0c;使用watch监听输入值的变化&#xff0c;并更新选中的充值金额选项。判断金额是否大于0&#xff0c;若是小于0&#xff0c;则…
阅读更多...
【对于一维信号的匹配】对一个一维（时间）信号y使用自定义基B执行匹配追踪（MP）研究（Matlab代码实现）

【对于一维信号的匹配】对一个一维（时间）信号y使用自定义基B执行匹配追踪（MP）研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
43.字符串相乘

43.字符串相乘

目录 一、题目 二、代码 一、题目 43. 字符串相乘 - 力扣&#xff08;LeetCode&#xff09; 二、代码 class Solution { public: string addStrings(string num1, string num2)//求两个字符串相加 {int end1 num1.size() - 1;int end2 num2.size() - 1;int next 0;//进位…
阅读更多...
分布式定时任务框架Quartz总结和实践（1）

分布式定时任务框架Quartz总结和实践（1）

一、概述 Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目&#xff0c;它可以与J2EE与J2SE应用程序相结合也可以单独使用。Quartz可以用来创建简单或为运行十个&#xff0c;百个&#xff0c;甚至是好几万个Jobs这样复杂的程序。Jobs可以做成标准的Java组件或…
阅读更多...
springboot mybatis鲜花商城平台

springboot mybatis鲜花商城平台

伴随着互联网技术的进步&#xff0c;各种电商平台也如雨后 春笋不断涌现。一个好的电商平台应该具有用户体验度高&#xff0c;用户信息安全等特点, 从而可以满足更多的用户需求。现有的电商平台虽然在不断完善&#xff0c;但仍然存在着 不少问题。本设计是一个基于java的spring…
阅读更多...
租赁OLED透明屏：打造独特商业体验的智慧选择

租赁OLED透明屏：打造独特商业体验的智慧选择

近年来&#xff0c;OLED透明屏技术在商业领域中迅速崛起&#xff0c;其高透明度和卓越的图像质量为商家创造了全新的展示方式。 租赁OLED透明屏作为一种智慧选择&#xff0c;不仅能提升品牌形象和吸引力&#xff0c;还能创造与众不同的视觉体验。 对此&#xff0c;尼伽将和大…
阅读更多...
【Eureka技术指南】「SpringCloud」从源码层面让你认识Eureka工作流程和运作机制（上）

【Eureka技术指南】「SpringCloud」从源码层面让你认识Eureka工作流程和运作机制（上）

前言介绍 了解到了SpringCloud&#xff0c;大家都应该知道注册中心&#xff0c;而对于我们从过去到现在&#xff0c;SpringCloud中用的最多的注册中心就是Eureka了&#xff0c;所以深入Eureka的原理和源码&#xff0c;接下来我们要进行讲解下eureka的源码分析&#xff0c;由此应…
阅读更多...
Oracle数据迁移

Oracle数据迁移

问题描述&#xff1a; oracle数据库的所有表结构、数据、索引等需要需从测试库迁移到正式库。 解决步骤&#xff1a; oracle数据库迁移&#xff0c;主要通过expdp从测试库所在的源服务器将指定的数据表或数据源导出为一个或多个数据文件&#xff08;.dmp文件&#xff09;&…
阅读更多...
第五届太原理工大学新生赛（决赛）题解

第五届太原理工大学新生赛（决赛）题解

题解&#xff09; <font colorred>第五届太原理工大学新生赛&#xff08;决赛&#xff09;:star:A.810975:star2:<font colorgreen>题意:cherries:<font colorred>解决思路:pear:代码 :star:<font colorpink>B.hammer玩游戏:star2:<font colorgreen…
阅读更多...
STM32--综述

STM32--综述

文章目录 前言STM32简介STM32F103C8T6系统结构Keil软件安装注意事项新建工程操作流程 前言 本专栏将学习B站江协科技的STM32入门教程&#xff0c;通过自身理解和对老师的总结所写的博客专栏。 STM32简介 STM32是意法半导体&#xff08;STMicroelectronics&#xff09;公司推…
阅读更多...
5.3.10.静态映射表建立过程分析

5.3.10.静态映射表建立过程分析

5.3.10.静态映射表建立过程分析 5.3.10.1、建立映射表的三个关键部分 (1)映射表具体物理地址和虚拟地址的值相关的宏定义 https://blog.csdn.net/liangzuzong/article/details/131994560 (2)映射表建立函数&#xff08;宏定义&#xff09;。该函数负责由(1)中的映射表来建立li…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023