Vue中props与$parent的区别及使用场景实例

最新推荐文章于 2023-08-03 22:05:25 发布
最新推荐文章于 2023-08-03 22:05:25 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CiCiCi12/article/details/107026941
版权
本文探讨Vue中props与$parent的区别。props用于单项数据绑定，从父组件向子组件传递数据；而$parent不仅能接收数据，还能双向修改并调用父组件方法。在需要子组件渲染父组件数据时，使用props；若需在子组件事件中访问或改变父组件状态，可使用$parent，但这并不常见。
摘要由CSDN通过智能技术生成

初学Vue，发现props和$parent貌似都可以进行父子传递，那到底有什么区别呢？分别是在什么场景使用呢？

共同处：
都能够接收来自父组件数据。
不同处：
1）props仅仅只能接收，单项绑定。着重数据传递。向子组件传递数据。
2） p a r e n t 既 可 以 接 受 父 组 件 数 据 ， 又 可 以 修 改 父 组 件 数 据 。 是 双 向 的 。 3 ） parent既可以接受父组件数据，又可以修改父组件数据。 是双向的。 3） parent既可以接受父组件数据，又可以修

最低0.47元/天 解锁文章
CiCiCi12
关注
专栏目录
请说明Vue中$root、$refs、$parent的使用
youhebuke225的博客
05-29 492
会使你的应用变得难以理解和维护，因为它破坏了组件之间的明确接口。在需要访问祖先组件时，Vuex 或其他状态管理库可能是更好的选择。，因为它会破坏组件的封装性，使得你的应用难以理解和维护。在组件树中应该优先使用 props 和 events 进行父子组件之间的通信。是一个对象，其中包含了注册过 ref 属性的所有 DOM 元素和子组件实例。在大多数应用中，你不需要直接访问根实例，但在某些高级用法或插件开发时，它可能会很有用。如果用在子组件上，引用就指向组件实例。属性用于访问当前组件的父组件实例。
vue父子组件间引用：$parent、$children
flying meng的菜鸟居
05-18 6046
vue中提到【父子组件】，则一定会想到我们常用的父子组件通信：props+$on()、$emit() ，如图： 也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中来回传递”，我们最简单的解决办法就是通过props（和v-on）将数据从父组件传到子组件，再用$emit将数据从子组件传到父组件，以此循环引用。 但是在另一些场景下，我们可能想要比如（在父组件中）拿到子组件对象，然后直接操作其中数据，去实现一些功能，比如方法的调用。 有时候我们需要父
$parent 和 prop 使用的区别
weixin_33804582的博客
03-24 390
  在某些场景中，我们需要通过 props 来获取父组件的值；我们也可以通过 $parent 来获取父级组件的值，那么他们的区别是什么呢？以 element Ui 为例子： <template> <el-row :gutter="num"> <el-col></el-col...
7、Vue 组件-props属性，$refs和$parent
红鹰
08-08 275
Vue组件1、简单Vue组件1.1、根组件 案例 App.vue1.2、Home组件案例 Home.vue2、父组件向子组件传递参数--props属性2.1、父组件案例 Father.vue2.2、子组件案例 child.vue3、父子组件相互间访问-`$refs`和`$parent`3.1、父组件案例 MyF.vue3.2、子组件案例 MyC.vue 1、简单Vue组件 每一个.vue文件都是一个组件，包括模板template，业务逻辑 script 和样式style Vue项目的每个应用都是一个个小组
vue传值（先介绍props refs parent）
weixin_43675173的博客
11-19 315
vue中父组件像子组件传值：* *用props，如下： 父组件中： <template> <div> <firstchildren :Msg="msg"></firstchildren> </div> </template> <script> import firstchi...
vue组件通信---子传父(props方式)
zyy_wx的博客
09-24 1208
vue子传父(props方式)
Vue学习Day5 父子组件通信（props、自定义事件）、父子组件访问（$refs、$parent）
AIpoem的博客
07-09 540
1.父子通信 2.父子访问
vue父子组件间引用之$parent、$children
01-19
也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中来回传递”，我们最简单的解决办法就是通过props（和v-on）将数据从父组件传到子组件，再用$emit...
vue属性、$props、$options、$el、$root
weixin_45727786的博客
05-21 1526
Vue属性 1.$props: 2.$options 获取的是vue实例中的选项，包含自定义选项 3.$el:访问vue实例的根dom元素 4.$root获取根vue实例 ​ 1.​ $props:父组件传给子组件 ​ 4.$root获取根vue实例         root 和parent 都能够实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件，通过roo
vue学习笔记：父子组件之间的传值$refs和$parent，以及父组件给子组件传值props
lhxsirky的博客
08-29 3585
父组件获取子组件的值和方法 父组件： html代码 <!-- 父组件获取子组件的值 --> <v-header ref="headerTY"></v-header> <button @click="getData">父组件获取子组件的值和方法</button> js代码： <script> import H...
Vue中快速浏览页面以及父子组件的传值(props、$parent和$emit)
qq_43378800的博客
08-27 1738
1.如何在不搭建脚手架的情况下,写一个vue后缀的文件,然后浏览呢? 先安装一个全局的快速原型开发的功能 npm install -g @vue/cli-service-global 然后在需要浏览的文件中在终端中打开,输入vue serve 2.父子组件的传值 a.父传子 关键字: props 子组件定义 props属性 props:['num','age'.....] 父组件使用子组件...
关于Vue中props的详解
热门推荐
jingtian678的博客
07-23 13万+
看一下官方文档： 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。 也就是props是子组件访问父组件数据的唯一接口。 详细一点解释就是： 一个组件可以直接在模板里面渲染data里面的数据（双大括号）。 子组件不能直接在模板里面渲染父元素的数据。 如果子组件想要引用父元素的数据，那么就在...
大白话理解vue父传子props的过程
大胆刁民的博客
10-26 353
大白话理解整个过程：props理解为properties(属性的缩写)，巧计：props和parent都是p开头，那么就理解为是父传子，父传子内容，儿子要拿东西接收吧，那么此时，子就要用props来接收，传输的数据不可能永远都是一个吧，那么就要用数组来接收。即子组件里面要使用props数组，而且里面的内容自己定，毕竟是自己拿东西接受父亲传来的数据。儿子说我拿碗接收，那么父亲就要往碗里面传输数据。即父组件要动态绑定儿子里面props数组里面自定义的属性，这样就能建立一个通道传输数据了。 1.父组件向子组件.
VUE 父子组件的传递 props、$refs 、 $emit、$parent、$children、$root
xqhys的博客
04-24 2816
转载：https://blog.csdn.net/alokka/article/details/87104189 组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。 1.父向子 通过 p...
vue elementui 里通过this.$parent.$parent找不到上级变量或方法的解决方案
搬砖小白灿哥哥
07-06 1985
vue elementui 里通过this.$parent.$parent找不到上级变量或方法的解决方案
组件传递数据——props（父传子）
最新发布
weixin_46372993的博客
08-03 5418
props的用法（1）Parent组件：< template > < h3 > {{ message }} < Child /> //3、显示Child组件内容 < script > import Child from './Child.vue';//1、导入Child组件 export default {data() {return {Child } //2、注入Child组件 }
vue props 三种方式
weixin_51237264的博客
05-09 1014
一、数组方式 props: ['Parentvalue1','Parentvalue2','Parentvalue3'] 二、对象方式 props: { // 属性值限定类型 parentValue1: Object, parentValue2: String, parentValue3: Array } 对象方式，可以声明 props属性的类型 三、props属性中的对象方式 props: { parentValue1: { ...
你需要的react面试高频考察点总结
beifeng11996的博客
11-08 189
高阶组件不是组件，是 增强函数，可以输入一个元组件，返回出一个新的增强组件属性代理 (Props Proxy) 在我看来属性代理就是提取公共的数据和方法到父组件，子组件只负责渲染数据，相当于设计模式里的模板模式，这样组件的重用性就更高了反向继承} } }Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。用法：在父组件上定义getChildContext方法，返回一个对象，然后它的子组件就可以通过this.context属性来获取{{
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值