VUE组件传值案例讲解

何处锦绣不灰堆

发布于 2020-07-29 15:26:50

6290

发布于 2020-07-29 15:26:50

写在前面

好吧我承认我疏忽了，我一直以为我的博客是将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相当牛叉的两个地方，所以这个要不要学会你们自己品，重要性就不要我说了，这篇文章我会跟进，这篇文章写的是最基础的用法，还有很多的高级用法，回头再更新一篇，我发现我写的越基础的东西看的人越多，额，可能是大家都比较注意基础吧，以后我也尽量写一些关于组件使用的文章，感谢阅读！

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-07-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery ui