$parent 和 prop 使用的区别

最新推荐文章于 2025-08-20 00:08:46 发布

weixin_33804582

最新推荐文章于 2025-08-20 00:08:46 发布

阅读量416

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：https://segmentfault.com/a/1190000008811631

本文探讨了Vue.js中两种获取父组件属性的方法：props和$parent的区别。通过具体的Element UI示例，展示了如何使用这两种方式来获取父组件的值，并分析了它们的特点和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在某些场景中，我们需要通过 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 有冲突，等我遇到或者有时间再理解一下。使用时先注意一下吧。

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