专栏首页用户7363577的专栏VUE组件传值案例讲解

VUE组件传值案例讲解

写在前面

好吧我承认我疏忽了,我一直以为我的博客是将vue的一些常见操作全部写完了的,但是直到我写组件的时候突然想起来看一下自己写的博客是不是有问题的才发现,组件之间的传值竟然一直没动过,好吧,我承认我自卑,我真的很怕黑,每当夜晚来临的时候我都很狼狈…咳咳,放错了,不好意思,我承认我忘了,我真的很劳累,每当粉丝问问题的时候我都慌的一批(以为哪里又又又又误人子弟了)…吓得我赶紧写个例子给你们,开整…

搞明白谁是“父”谁是“子”

没写之前呢先搞明白一个问题,组件引用的时候到底谁是老子,谁是儿子,被打的是儿子,打人的老子,记住这个就可以了,被引入的是儿子,引入他的是老子,也就是说我们一般写公共组件的时候都是在写子组件,父组件是调用这些子组件的。

用dialog进行举例子[实现一个子组件]

写个dialog组件:

<template>
  <div>
    <el-dialog :title="title" :visible.sync="openCurrDialog" :width="options.width" :before-close="_closeCurrDialog">
      <span>{{msg}}</span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: () => "标题"
      },
      openCurrDialog: {
        type: Boolean,
        default: false
      },
      options: {
        type: Object,
        default: () => {
          return {
            width: "50%"
          }
        }
      },
      msg: {
        type: String,
        default: () => "这是一段引入的文字"
      }
    },
    data() {
      return {

      }
    },
    methods: {
      _closeCurrDialog() {
        this.$emit("_closeIt", "关闭了")
      }
    }
  }
</script>

<style>
</style>

这个时候我们只需要看谁需要用到它

父组件引入子组件

<template>
  <div>
    <el-card style="margin: 10px;">
      <el-button @click="statusDialog = true">
        打开dialog
      </el-button>
      <commonDialog :msg="msg" :title="title" :options="currOptions" :openCurrDialog="statusDialog" @_closeIt="_closeCurrDialog"></commonDialog>
    </el-card>
  </div>
</template>

<script>
  import commonDialog from "../commonComponents/commonDialog.vue"
 
  export default {
    components: {
      commonDialog,
    },
    data() {
      return {
        msg:"我是来自父亲的关爱",
        statusDialog: false, //当前的dialog是不是显示
        title: '引用的dialog', //当前的dialog的标题
        currOptions: {
          width: "30%"
        }
      }
    },
    methods: {
      /**
       * @param {Object} val
       * @function _closeCurrDialog 关闭当前dialog
       */
      _closeCurrDialog(val) {
        //这里需要注意的是 val是跟随函数直接过来的,所以不需要进行传值的操作,只需要在组件中设置好需要的参数即可!
        console.info(val)
        this.statusDialog = false
      },
     
    }
  }
</script>

<style>
</style>

效果

简单的讲解和注意点

  • 作用:我们做组件有几个好处,第一个是简化代码,提高代码的复用性,同样的功能尽量将共同点抽离出来,不同点定义出来,这样有类似功能的时候可以直接拿过去用,第二是数据之间的传递更加的方便。
  • 传值:子组件给父组件的数据使用的emit将数据封装到函数里面进行传递:
  • :before-close="_closeCurrDialog" //绑定一个函数
 /**
       * @function _closeCurrDialog 给父组件的数据
       * @prod 这里定义的函数名字是子组件使用的函数名字,这里说明一点,如果你给父组件的值是一个变量也可以直接传递
       */
      _closeCurrDialog() {
        this.$emit("_closeIt", "关闭了")
      }

父组件接收子组件的值

  • @_closeIt="_closeCurrDialog" //_closeIt就是在子组件里面定义的函数名字,这里不需要定义形参数
/**
       * @param {Object} val
       * @function _closeCurrDialog 关闭当前dialog
       * @prod 接收到了子组件的值以后呢,不管是不是有值,我们都不需要重新定义值来接收它,直接在含里面写一个形参就可以了
       */
      _closeCurrDialog(val) {
        //这里需要注意的是 val是跟随函数直接过来的,所以不需要进行传值的操作,只需要在组件中设置好需要的参数即可!
        console.info(val)
        this.statusDialog = false
      },

子组件接收父组件的值

  • 导入需要的子组件路径
import commonDialog from "../commonComponents/commonDialog.vue"
  • 引入组件
components: {
      commonDialog //这里可以直接起一个别名  形式是:“别名” : commonDialog
    },
  • 参数传递
      <commonDialog :msg="msg" :title="title" :options="currOptions" :openCurrDialog="statusDialog" @_closeIt="_closeCurrDialog"></commonDialog>

里面的所有的:绑定的值都是子组件里面props定义的,我们看子组件里props

props: {
      title: {
        type: String,
        default: () => "标题"
      },
      openCurrDialog: {
        type: Boolean,
        default: false
      },
      options: {
        type: Object,
        default: () => {
          return {
            width: "50%"
          }
        }
      },
      msg: {
        type: String,
        default: () => "这是一段引入的文字"
      }
    },

props就当作是传递的一个桥梁就可以,这里需要注意的一个点是在props里面定义的值不要在data里面定义了,不然会报错,假设我定义了会如下的错误:

翻译成中华方言就是:数据属性“msg”已声明为属性。改为使用属性默认值。 细品 那么你想要给子组件的值就正常在父组件的data里面使用就可以了。这样你在父组件里面的操作的数据就可以传递给到子组件了!

总结

首先不可否认的是数据驱动和组件化是vue相当牛叉的两个地方,所以这个要不要学会你们自己品,重要性就不要我说了,这篇文章我会跟进,这篇文章写的是最基础的用法,还有很多的高级用法,回头再更新一篇,我发现我写的越基础的东西看的人越多,额,可能是大家都比较注意基础吧,以后我也尽量写一些关于组件使用的文章,感谢阅读!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • uni-app实战之路-组件传值

    $on使用文档 这里趁着这个组件传值的机会,将这个也写一下吧。在index.vue文件的onLoad里面注册一个全局订阅的事件

    何处锦绣不灰堆
  • [Vue warn]: Avoid mutating a prop directly...

    我百度了很多的解决问题的帖子,都是直接贴出来英文的,翻译一下会死啊,真的是,很多的问题我们都不是说不知道怎么解决,其实是我们压根没看懂描述的是什么意思,就像这个...

    何处锦绣不灰堆
  • vue+element踩坑记-时间组件的注意事项

    发布了时间组件的计算日期的方法才发现,日期组件怎使用的忘记发布了,不好意思,这里简单的总结一下怎么使用的,写的很简单,基本就是官方的东西拿来用的,毕竟是官方自己...

    何处锦绣不灰堆
  • 基于组件的.NET技术(5)

    实战: 创建一个VB.NET Windows应用程序:VBTestDynamicComponent。将前面介绍的两个类ComponentList和LoadCo...

    脑洞的蜂蜜
  • 【Web技术】314- 前端组件设计原则

    我在最近的工作中开始使用 Vue 进行开发,但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多,但是二...

    pingan8787
  • 组件化通用模式

    一、前言 模式是一种规律或者说有效的方法,所以掌握某一种实践总结出来的模式是快速学习和积累的较好方法,模式的对错需要自己去把握,但是只有量的积累才会发生质的改变...

    企鹅号小编
  • 企业 SOA 设计(2)–组件化产品开发平台

    上一篇《企业 SOA 设计(1)–ESB 设计》中,写到我们的 SOA 设计分为两个层面来进行:一个是系统间的 SOA 设计,主要通过 ESB 来完成;另一方面...

    用户1172223
  • 说一句最好的Flutter开源项目也不过分

    老孟导读:首先声明此项目不是我完成的,是大神`张风捷特烈`呕心沥血之作,对初学者有极大对帮助,当然我获得了大神`张风捷特烈`的授权,所以我不是盗版哦。

    老孟Flutter
  • 【译】以接口为中心,让接口来接管,组件作为服务。重用组件和服务

    现如今,云服务在每个月都会大概收到1x10e16次的接口调用。这一巨大的变化改变了软件的开发模式。我们已经通过复用软件中的接口和开源来完成我们一部分的梦想。对我...

    腾讯IVWEB团队
  • 【美团技术团队博客】前端组件化开发实践

    前言 一位计算机前辈曾说过: Controlling complexity is the essence of computer programming. 随着...

    美团技术团队

扫码关注云+社区

领取腾讯云代金券