$parent 和 prop 使用的区别

2024年2月17日 282次阅读 来源: Hunter_Gu

  在某些场景中，我们需要通过 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.&dollar;parent 却不是这样，this.&dollar;parent 访问的是直接的父实例，就是 el-row 这个实例， this.&dollar;parent.$parent 访问的才是当前的实例。

总的来说：

  • props 比较直接，就像是赋值，可以给我值就行了。

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

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

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

    原文作者：Hunter_Gu
    原文地址: https://segmentfault.com/a/1190000008811631
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞