$parent 和 prop 使用的区别

  在某些场景中，咱们须要经过 props 来获取父组件的值；咱们也能够经过 $parent 来获取父级组件的值，那么他们的区别是什么呢？
以 element Ui 为例子：

<template>
    <el-row :gutter="num">
        <el-col></el-col>
    </el-row>
<template>

<script>
export default {
    data () {
        return {
            num: '20'
        }
    }
}
</script>

  gutter 是 el-row 组件的 props。看了 Demo 后知道，这个 gutter 的值，是用来设置每一个 col 之间的间隔的，那么在 el-col 这个组件中怎么获得这个 gutter 值呢？

• 方法一
  在 el-col 中也设置一个 props（暂且也叫 gutter），用来获取，以下：

<template>
    <el-row :gutter="num">
        <el-col :gutter="num"></el-col>
    </el-row>
<template>

//el-col 中部分设置
export default {
    //...
    porps: ['gutter'],
    computed: {
        style () {
            let ret = {}
            ret.paddingLeft = this.gutter / 2
            ret.paddingRight = ret.paddingLeft

            return let
        }
    }
}

  嗯这样确实能够获取到，可是咱们也能够看到 elemnt ui Demo 中都是直接设置数字的，而没必要再经过一个中间变量了，也没必要再在 el-col 上面再设置一次 props 了，下面是方法二。

• 方法二
  在 el-col 组件中 经过 $parent 获取到 el-row 中的 props 或者 data。

<template>
    <el-row :gutter="20">
        <el-col></el-col>
    </el-row>
<template>

//el-col 中部分设置
export default {
    //...
    computed: {
        gutter () {
            return this.$parent.gutter
        },
        style () {
            let ret = {}
            ret.paddingLeft = this.gutter / 2
            ret.paddingRight = ret.paddingLeft

            return let
        }
    }
}

  这样之后，确实方便不少，使用组件的开发人员也会省事很多了。

<template>
    <el-row>
        <el-col></el-col>
    </el-row>
<template>

上面这个结构中：

• el-col 组件的 props 能够访问到当前这个实例上的全部内容。

• 可是 this.$parent 却不是这样，this.$parent 访问的是直接的父实例，就是 el-row 这个实例， this.$parent.$parent 访问的才是当前的实例。

总的来讲：

• props 比较直接，就像是赋值，能够给我值就好了。

• $parent 更有做用域／父子级的概念，它要一层一层向上访问。

注意：文档上说，同时使用 $parent 和 $children 有冲突，等我遇到或者有时间再理解一下。使用时先注意一下吧。

  很简单的一篇文章，你们轻喷，有不对的地方麻烦帮忙指出，感谢！转载请注明出处。