草庐IT

Vue中几种常见的传参方式

星II河 2024-06-06 原文

前言

Vue组件传参方也是面试最常考的内容,犹记得当初刚出来实习的时候,遇到一个需求,大概就是一个tabs下面有五个子页面,每个子页面表示订单的一种状态。当时是把五个子页面抽成了五个组件,做完后又有一个问题,就是在一个页面更改了数据状态之后,切换到另一个页面的时候要通知这个页面更新数据,当时是完全没有思路,找带我的大哥教我,讲了半天还是没有懂,最后还是大哥手把手的教我写完的,那时候觉得大哥好厉害,666,现在一想起来,不就是最简单的兄弟组件之前参数传递吗?😓今天就来回忆一下工作中常用的几种组件传参的方式。

父子组件之间传参

父子组件之间最常用的组件传参方式就是:父传子使用v-bind:attr传递,子组件使用props接收,子传父使用方法传递,父组件在方法参数中获取,即$emit['method':val],父组件使用@method接收。

// 父传子
// 父组件
<template>
    <div>
        父组件
        <br/>
        <child  :name="name"  @getChild="getChild"/>
    </div>
</template>

<script>
  export default {
     data(){
       return {
         name:'father'
       }
     },
     methods:{
       getChild(val){
         console.log(val)  // 123
       }
     }
  }
</script>

// 子组件

<template>
    <div>
        子组件
        <br/>
        {{name}}
        
        <button @click="toParent">传到父组件</button>
    </div>
</template>

<script>
  export default {
     props:{
       name:{ type: String, default:''}
     },
     data(){
       return {
       }
     },
     methods:{
       toParent(){
         this.$emit('getChild',123)
       }
     }
  }
</script>

除此之外,vue还提供了一种语法糖,可以简单的实现父子组件间数据的双向绑定。

// 父组件
<template>
    <div>
        父组件
        <br/>
        <child  :name.sync="name" />
    </div>
</template>

<script>
  export default {
     data(){
       return {
         name:'father'
       }
     }
  }
</script>

// 子组件

<template>
    <div>
        子组件
        <br/>
        {{name}}
        <button @click="toParent">传到父组件</button>
    </div>
</template>



<script>
  export default {
     props:{
       name:{ type: String, default:''}
     },
     data(){
       return {
       }
     },
     methods:{
       toParent(){
         this.$emit('update:name',123)
       }
     }
  }
</script>

父组件还可以使用$refs直接调用子组件的所有属性和方法,但是并不推荐使用这种方法。

<child ref="child"></child>
// 父组件可以使用$refs.child.xxx直接调用子组件的属性和方法

兄弟组件之间传参

兄弟组件之间传参可以使用vuexlocalStoragesessionStorageEventBus事件中转,前面三种方法无非就是找第三方把数据存起来,需要的时候再获取就行,这里主要讲一下事件中转的用法。

// 1.首先在app.vue种定义一个中转站,再挂载到全局对象上面。
// App.vue
Vue.prototype.$eventBus = new Vue()

// 2.在需要传递的页面使用$emit(eventName,params)发射参数
this.$eventBus.$emit(eventName,params)

// 3.在需要接收参数的页面使用$on(eventName,(params) => {}) 接收参数
this.$eventBus.$on(eventName,(params) => {})

这种方法其实还可以用于跨层级传参,以前我很抵触这种用法,后来用过一次之后觉得真香啊。还有需要注意的一点就是在组件销毁的时候记得移除监听的事件绑定,使用$eventBus.$off(eventName)实现事件监听移除。

provide/inject传参

provide/inject可以用于跨层级传参,不过只能从上到下:

// 在上级组件中使用provide修饰的数据,在下级组件中可以使用inject接收,类似于props
 // 上级组件
 <script>
   export default {
     data(){
      return {
        age: 12
      }
     },
     provide(){
       return {
         name: 111,
         age: this.age
       }
     }
   }
   
   // 下级组件
    <script>
   export default {
     data(){
      return {
      }
     },
     inject:['name','age'] // 使用时当data数据使用就行
   }
 </script>

值得注意的是,如果上级组件传的数据是响应式的,那么接收到的数据就是响应式的,反之亦然。
以上就是我在工作中常用的组件传参方式,喜欢的话就点个赞再走吧。

有关Vue中几种常见的传参方式的更多相关文章

  1. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串? - 2

    我试图获取一个长度在1到10之间的字符串,并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符,然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上,我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解),但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行,然后我尝试添加评论。靠我自己,我设法让它进入了可以从script/console添加评论的阶段,但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作,以添加评论。我的问题是:这是“标准”方式吗?我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  4. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  6. git使用常见问题(提交代码,合并冲突) - 2

    文章目录git常用命令(简介,详细参数往下看)Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一:放弃本地代码方法二:合并代码常用命令以及详细参数gitadd将文件添加到仓库:gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支:gitbranch合并分支:gitmerge删除分支:gitbranch-ddev查看分支合并图:gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g

  7. ruby - 鸭子输入字符串、符号和数组的优雅方式? - 2

    这是针对我无法破坏的现有公共(public)API,但我确实希望对其进行扩展。目前,该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗?数组,但还有其他发送列表的方法,这不是很像ruby​​。我将调用列表中的map,所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map,所以这行不通。 最佳答案 如何将它们全部视为数组?String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  8. ruby - 将对象设置为 nil 是否很常见? - 2

    我正在构建一个应用程序,想知道是否将未使用的对象设置为nil是生产级编码中的常见做法。我知道这只是垃圾收集器的提示,并不总是处理对象。 最佳答案 根据这个thread如果您使用完一个成员对象,将其设置为nil将引发被引用对象被垃圾回收。如果它是局部变量,方法exit将做同样的事情。也就是说,如果您要求将成员显式设置为nil,我会质疑您的设计。 关于ruby-将对象设置为nil是否很常见?,我们在StackOverflow上找到一个类似的问题: https://

  9. ruby - 如何以编程方式删除实例上的 "singleton information"以使其编码(marshal)? - 2

    我创建了一个由于“在运行时执行的单例元类定义”而无法编码的对象(这段代码的描述是否正确?)。这是通过以下代码执行的:#defineclassXthatmyusesingletonclassmetaprogrammingfeatures#throughcallofmethod:break_marshalling!classXdefbreak_marshalling!meta_class=class我该怎么做才能使对象编码正确?是否可以从对象instance_of_x的classX中“移除”单例组件?我真的需要一个建议,因为我们的一些对象需要通过Marshal.dump序列化机制进行缓存。

  10. ruby - 变量赋值后的 if 语句 - 有多常见? - 2

    我最近与一位同事讨论了以下Ruby语法:value=ifa==0"foo"elsifa>42"bar"else"fizz"end我个人并没有看到太多这种逻辑,但我的同事指出,这实际上是一种相当普遍的Rubyism。我试着用谷歌搜索这个主题,但没有找到任何文章、页面或SO问题来讨论它,这让我相信这可能是一种非常实际的技术。然而,另一位同事发现语法令人困惑,而是将上面的逻辑写成这样:ifa==0value="foo"elsifa>42value="bar"elsevalue="fizz"end缺点是value=的重复声明和隐式elsenil的丢失,如果我们想使用它的话。这也感觉它与Ruby

随机推荐