$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 有衝突，等我遇到或者有時間再理解一下。使用時先注意一下吧。

  很簡單的一篇文章，你們輕噴，有不對的地方麻煩幫忙指出，感謝！轉載請註明出處。