14,人家搞前端搞3年的工资和你10年的工资是差不多，但编程深度异样

贪吃蛇学院

于 2020-10-31 15:35:39 发布

阅读量394

点赞数 1

分类专栏：程序员前端面试 vue.js 文章标签：前端 javascript html5 node.js sass

原文链接：https://blog.csdn.net/qq_41485414/article/details/107627050

版权

程序员同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue.js

22 篇文章 0 订阅

订阅专栏

前端面试

5 篇文章 0 订阅

订阅专栏

本文详细介绍了在Vue框架中如何进行前端组件化开发，特别是父子组件之间的数据传递。通过实例展示了如何创建一个自定义组件`commonDialog`，并演示了子组件如何通过`props`接收父组件的值，以及使用`$emit`向父组件发送数据。同时，文章强调了组件化开发的优点，如代码复用和简化复杂性，并提醒开发者注意在props中定义的属性不应在data中重复定义，以避免错误。

摘要由CSDN通过智能技术生成

2021【前端VUE框架】看看人家搞前端10年的工资和搞3年的工资是差不多，但编程深度异样

贪吃蛇学院

好吧我承认我疏忽了，我一直以为我的博客是将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>
      
1里面的所有的：绑定的值都是子组件里面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”已声明为属性。改为使用属性默认值。you细品
那么你想要给子组件的值就正常在父组件的data里面使用就可以了。这样你在父组件里面的操作的数据就可以传递给到子组件了！

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