浅谈vue refs和props的区别

最新推荐文章于 2024-05-15 16:40:47 发布
最新推荐文章于 2024-05-15 16:40:47 发布
阅读量802 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38233449/article/details/119992415
版权

常见场景：有一个子组件，父组件需要调用里面的子组件的方法，可以这样操作：

<child  ref="mychild"></child>

父组件：this.$refs.mychild.子组件方法()  =>这样就可以调用子组件的方法

              this.$refs.cardForm.scShowFrom = true =>这样就可以修改子组件的属性

 那么这种修改子组件属性的方法和props传进去的更改子组件的方法有何不同？

             答案是：this$refs去修改的时候不能双向绑定   

props 着重与数据传递, 父组件向子组件传递数据, 但是他并不能调用子组件里面的属性和方法。

$refs 着重与索引，主要用于调用子组件里面的属性和方法。并且当ref使用在DOM元素的时候, 能起到选择器的作用, 我们可以通过它能获取到DOM元素的节点, 可以对DOM元素进行操作等。

总的来说props更加符合vue的思想

米方
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父子组件传值：props,$ref和$emit
weixin_47863547的博客
04-13 1039
一.props实现通信 父组件向子组件传值，子组件的props选项能够接收来自父组件数据。props仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式也分为两种：静态传值和动态传值 1.静态传值 示例： 父组件是App.vue ,子组件是Head.vue App.vue 父组件: <template> <div id="app"> <v-head msg='标题'></v-head> </div>
关于vue中的$refs和$emit，以及props
weixin_48962287的博客
07-08 734
有很多刚接触前端的同学分不清这俩的区别，这俩父子间的传值和调用，感觉都一样。其实不然，这俩的。
props的几种写法——defineProps定义props、toRefs接收props、computed中get和set写法、watch深度监听immediate-true
最新发布
weixin_44867717的博客
05-15 737
script>//写法一Reply},data() {return{replys:''},methods: {//写法二props: {id: {},},width: {},data() {return{replys:''},methods: {</script>
vue中的ref $refs emit props 搞清楚这几个概念，就能明白vue的组件通信机制！
acoolgiser的博客
05-16 1294
首先看小编找到的两篇博客： https://www.jianshu.com/p/ff2cead55068 https://www.cnblogs.com/360minitao/p/11840559.html 看完应该就能明白vue组件通信的props方式、emit方式、ref方式这三种方式的区别。 对ref $refs的更深入理解： https://www.jianshu.com/p/623c8b009a85 https://www.cnblogs.com/xumqfaith/p/7...
Vue中$ref、$emit、props三中传参方式区别和使用
bingzi27的博客
09-24 1242
Vue中$ref、$emit、props三中传参方式区别和使用
Vue基础知识之组件及组件之间的数据传递及prop和$refs在父传子时的区别
潜行IT的博客
10-08 1595
  vue中的组件是自定的标签，可以扩展的原生html元素，封装可复用的代码 note： 1、在标签命中不要使用大写，标签名字必须用短横线隔开 2、模板中只能有一个根元素，不能使用并列标签。 定义组件 全局定义，在所有实例中都可以使用这个组件 &lt;template id='hello'&gt; &lt;div&gt; &lt;div&gt;hello&...
vue 父组件通过$refs获取子组件的值和方法详解
10-16
总结来说，Vue 父组件通过 `$refs` 获取子组件的值和方法是一种直接的通信方式，适用于某些场景，如需在父组件中直接调用子组件的方法或获取实时状态。但通常，推荐使用更灵活且易于维护的通信方式，如 props、事件...
详解vue2父组件传递props异步数据到子组件的问题
08-30
Vue2 父组件传递 props 异步数据到子组件的问题解析 在 Vue 2 中，父组件传递 props 异步数据到子组件是一个常见的问题。在本篇文章中，我们将详细介绍这个问题，并提供解决方法。 首先，让我们了解一下问题的来源...
vue2与vue3的使用区别与组件通信
09-12
在Vue2和Vue3中，子组件通过props接收父组件的数据，基本方式没有变化。但是，Vue3引入了`v-bind`的新简写形式：`:propName="value"`。 #### 2.Event Bus Vue2中常使用自定义事件（$emit）和Event Bus来实现非父子...
VUE面试题和详细答案
05-19
- 使用`ref`属性，如`ref="domName"`，在Vue实例中通过`this.$refs.domName`访问。 8. **Vue指令介绍**： - `v-model`：双向数据绑定，用于表单元素。 - `v-for`：循环遍历数据。 - `v-if`/`v-show`：条件显示/...
vue中的ref属性和props属性
weixin_44759289的博客
08-05 1369
1、ref属性的定义与用法： ①被用来给元素或子组件注册引用信息（id的替代者） ②应用在HTML标签上获取的真实DOM元素，应用在组件标签上是组件示例对象（VC） ③使用方式： //打标识： <h1 ref="XXX"> //获取 this.$refs.XXX 2、配置项props： 功能：让组件接收外部传过来的数据 ①传递数据： <Demo name="XXX"></Demo> ②接收数据 第一种方式（只接收）：props:["name"] 第二种方式：prop
Vue组件通信（props，refs）
最爱喝怡宝的博客
12-16 707
父子组件的通信（通讯） （组件的通信 是vue核心之一） 组件是vue的核心，组件的通信是vue的核心的核心 通信：数据的“动态的实时的”传递 父传子 父传子:（子组件中）props属性-----父用子的时候 通过 属性 传递 1.先创建根组件和一个局部组件，在根组件中注册局部组件，让局部组件成为根组件的子组件 <body> <div id="app"> <one></one> </div>
vue 父子组件通讯--props,refs(muse-ui,vue.js2.0)
yu2015java的博客
09-04 858
<client-pop-update ref="clientPopUpdate" title='编辑客户' :name="updateName" :tel="updateTel" :addr="updateAddr" :id="updateId" :index="updateIndex" :money="updateMoney" v-on:getUpd
工作笔记--vue选项props
jiaojsun的博客
03-01 1443
https://www.cnblogs.com/xiaohuochai/p/7388866.html 讲的很细致
Vue 父子组件之间通信 Props、$refs、$emit
个人纪录、总结！
07-03 235
这里有几篇写的比较好的可以参考： 篇一：https://www.cnblogs.com/padding1015/p/7878741.html 篇二：https://www.jb51.net/article/140581.htm
vue中关于组件传值的三种方式：“props“ ,“$refs“,“$emit“
提筆為青春
07-31 2306
这里写自定义目录标题props新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 props 这个一个单向传值的属...
React | 实例三大核心属性（state、props、refs)
m0_72383454的博客
11-07 361
实例三大核心属性（state、props、refs)
组件实例三大核心属性之一 props & refs
a_ausb的博客
07-27 75
每个对象都会有props属性组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据组件内部不能修改props数据，props数据是只读的。
React三大属性之props与refs简介
weixin_46628668的博客
05-29 508
之前介绍的state属性主要作用是标记组件的状态，且可以在初始化组件时就设置，而props属性主要是用来接收外部传入的数据。考虑如下诉求：实现人的信息的展示，人的信息由组件外的数据传入。此时需要使用props属性，React能自动收集组件标签中的各个属性数据，放入props属性中，然后在render方法中可以使用props属性中的数据： class MyDemo extends React.Component{ render() { const {name, age, sex}
vue refs调用子组件方法
09-29
在Vue中，如果父组件想要调用子组件的方法，可以使用refs引用子组件，并通过`this.$refs.refName.methodName()`来调用子组件的方法。在引用和引用的例子中，都展示了如何使用refs调用子组件的方法。 在引用的例子中，通过在子组件中添加ref属性，父组件可以通过`this.$refs.refName.methodName()`来调用子组件的方法。 在引用的例子中，父组件通过给子组件添加ref属性`ref="twoChildrenRef"`，然后在点击按钮的事件处理函数中使用`this.$refs.twoChildrenRef.methodName()`来调用子组件的方法。 在引用的例子中，父组件在模板中给子组件添加ref属性`ref="child"`，然后在点击事件处理函数中使用`this.$refs.child.methodName()`来调用子组件的方法。 除了通过refs调用子组件的方法，还可以通过父组件传递props的方式间接调用子组件的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值