关于新人学vue中的父子组件传递数据

最新推荐文章于 2024-06-12 10:51:45 发布
最新推荐文章于 2024-06-12 10:51:45 发布
阅读量106 收藏
点赞数
分类专栏： this.$emit prop 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Esen_Y/article/details/130282116
版权

总结一下,vue2.0取消了prop的双向绑定,当我们使用双向绑定控制的时候,会返回一个错误,具体忘了,大致意思就是这个对象不能回去

下面是 props,父组件传递到子组件的 实例

 这里在script第一行中先导入kid之后在页面区域直接输入<kid>即可

父组件:

 子组件:

 返回了一个true,我们本身在子组件中没定义A,返回的是一个true

 

接下来 就是 $emit

 首先要绑定事件,先自定义一个事件(这里是back事件),再给back事件绑定 一个方法backD,将原来的数据和从子组件传来的数据打印出来.注意:事件的绑定和值的传递都必须在引用的子组件<kid>里面使用,否则无效!!!!!!!!!

父组件对应的方法 :

 

子组件对应的方法 :

this.$emit("even String",value)

even String:是在父组件绑定的自定义事件,这里也就是下面的back自定义事件,传递了一个value(值)去参照下面这个图可以知道,这个value是给了backD这个方法接收,这时候回到上文的父组件对应的方法图中,可以看到 接收到的value在backD中进行了打印赋值再打印的操作(定义方法的参数:val 是形参 ,可以随便定义,但是这里自定义事件@back中规定了接收$emit的值给backD这个方法,所以val也就是接收的 value)

 父组件的C定义的false

义是

 子组件定义的true结果为:

原来的C是父组件的 C(值原本为false),现在的C是子组件传递 到父组件的C(值从原本的false改为了true)

 新人分享学习总结,也希望能帮到其他新人,欢迎大佬纠正错误,代码写的不好请勿喷,比较才开始学vue

Esen_Y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中父子组件的数据传递
weixin_42372852的博客
09-05 607
vue中父子组件的数据传递 本文章需要用到的俩个重要属性：prop类型和$emit事件 文章目录vue中父子组件的数据传递前言一、父组件给子组件传递数据1、关于Prop的理解2、使用Prop传递标题3、通过 Prop 向子组件传递数据1.代码如下（示例）：二、子组件给父组件传递数据1、$emit自定义事件2、父子组件的相互传递1.代码如下（示例）：总结 前言 一、父组件给子组件传递数据 1、关于Prop的理解 Prop可以使你在组件上注册一些自定义的属性，当一个值传给prop属性的时候，它就变成了那个组件
Vue中父子组件数据传递
传播有益的技术文章，力求精准、专业、专心、专享
06-05 587
当v-bind绑定是一个对象字面量时，对象的所有属性都会被当前props传入，而且组件属性名与对象属性名一至，此时，可以使用无参的v-bind来简化属性绑定，即只使用v-bind而不需要使用:prop-name绑定形式。Vue中，父子组件数据传递应遵循单向数据流原则，比如，构建一个博客，可能需要一个表示博客文章的组件，并且，所有的博客文章使用相同的视觉布局，但内容却不相同。原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。类型的 props 有特别的类型转换规则。
VUE父子组件中的数据传递
weixin_45617525的博客
01-11 220
VUE组件化中的数据传递 父组件向子组件传递数据 首先需要在引用子组件的时候使用v-bind:content进行绑定父组件的数据，然后使用子组件中的props:[‘content’]进行接收绑定的数据。 子组件向父组件传递数据 当想让子组件向父组件传递数据的时候，首先要在子组件里使用this.emit()发出事件操作，然后在父组件中绑定该事件的行为。我这个例子的意思是：我使用了子组件向父组件传值实现了TodoList的删除单项功能。首先在子组件中使用this.emit()发出事件操作，然后在父组件中绑定该
【Vue实现父子组件之间的数据传递的常用方法】
最新发布
qq_45868160的博客
06-12 913
当你在 Vue.js 应用中使用父子组件时，你会经常需要在它们之间传递数据。这是一种常见的模式，因为它使得应用程序的不同部分可以相互通信和协作。以下是关于如何在 Vue.js 中实现父子组件之间的数据传递的常用方法
vue父子组件传递数据
weixin_42594968的博客
09-23 108
/** * 父子组件传递数据 * 1)、子组件给父组件传递数据，事件机制 * 子组件给父组件发送一个事件，携带上数据 * this.$emit('事件名', 携带的数据...); * */ <el-tree :data="menus" :props="defaultProps" node-key="catId" ref="menuTree" @node-click="nodeclick"> nodeclick(data,node,component){ cons
Vue父子组件传递数据
smyqwe123的博客
08-20 252
Vue父子组件传递数据 Vue父子组件传递数据Vue父子组件传递数据父组件传递数据到子组件父组件如何把数据传给子组件？子组件如果接收父组件的数据？子组件传递数据到父组件总结 父组件传递数据到子组件 父组件如何把数据传给子组件？ 1.在子组件<blog-post>的标签里添加父组件要传递的数据。title是子组件中规定的porps属性，porps属性就是允许父组件传递给子组件的数据名称。hello!字符串就是要传递给子组件的数据。也可以使用v-bind进行数据绑定。 // title是子组件中规定
Vue中的父子组件传值从父组件控制子组件的显示
qq_36355178的博客
03-11 5459
今天在工作遇到了一个小问题,需求是在一个vm实例中创建一个组件,是一个弹框,我使用了组件来做这个弹框.在父组件中有一个按钮点击显示子组件. 当子组件显示的时候,子组件左上角有一个× 点击可以关闭他,一开始我是这么做的: 在父组件上定义一个变量,默认为false ,然后使用v-show来控制子组件的显示和隐藏 当子组件显示的时候在子组件上定义变量,默认为true,当点击 ×的时候改变这个变量为fa...
使用Vue3完成父子件传递数据，点击按钮完成数据更新(1)
m0_58269070的博客
04-19 834
11，transform、translate、transition 分别是什么属性？以后有时间再写详细的Bug总结，其中碰到的缺陷就是使用reactive的时候数据双向绑定失败。14，对前端性能优化有什么了解？13，javascript 的垃圾回收机制讲一下,6，DOM 事件有哪些阶段？5，两栏布局，左边固定，右边自适应，左右不重叠。10，ES6 的 class 和构造函数的区别。9，async 和 await,2，如何实现一个最大的正方形。3，一行水平居中，多行居左。1，判断 js 类型的方式。
面试应该准备些什么材料，Vue表单类的父子组件数据传递示例，前端基础入门教程
m0_74918915的博客
04-09 646
使用Vue.js进行项目开发，那必然会使用基于组件的开发方式，这种方式的确给开发和维护带来的一定的便利性，但如果涉及到组件之间的数据与状态传递交互，就是一件麻烦事了，特别是面对有一大堆表单的页面。在这里记录一下我平时常用的处理方式，这篇文章主要记录父子组件间的数据传递，非父子组件主要通过Vuex处理，这篇文章暂时不作说明。与文档里给的方案一样，父组件向子组件传递数据主要通过 props，子组件向父组件传递数据主要通过触发器 $emit()，只是在用法上会有些不同。
vue3笔记（乱七芭蕉更新中）
你爹的博客
07-15 461
一、关于组件 组件注册 通过vue.creatapp({})注册,可以任意使用次数不限制. // 创建一个Vue 应用 const app = Vue.createApp({}) // 定义一个名为 button-counter 的新全局组件 app.component('button-counter', { data() { return { count: 0 } }, template: ` <button @click="count++">
Vue父子组件数据传递.zip
10-30
Vue组件数据传递：父组件数据传递给子组件，常用的props方法进行传递；并给出两个方法以解决传递时的单向数据流问题。
2024 前端Vue面试题大全汇总 (82道)_vue面试题2024，github面经
m0_61369275的博客
04-20 1067
插槽slot可以理解为占坑，当使用一个组件的时候，在组件标签里的对应的内容就会替换掉这个组件中的slot标签。插槽分为默认插槽具名插槽作用域插槽。默认插槽子组件中用slot标签来确定渲染位置，父组件使用它时直接在子组件的标签内写入内容即可//子组件//父组件默认插槽具名插槽顾名思义就是具有名字的插槽，子组件中可以用name熟悉对slot命名，父组件在使用的时候通过template中的或者#name来定义这个插槽中的内容//子组件//父组件具名插槽内容作用域插槽子组件中的slot。
Vue父子组件传数据
唐宋元明清
05-15 632
父向子：props子向父：$emit（）举个列子：&lt;div id="root"&gt; &lt;div&gt; &lt;input type="text" v-model="inputval" @keyup.13="hadsubmit"&gt; &lt;/div&gt; &lt;ul&gt; &lt;todo
vue父子组件相互传递数据
hangzhang
09-16 570
前言 vue父子组件之间相互传递数据应该是我们开发中最常见的场景。今天刚好有时间就写两个简单的小例子记录一下。 一、父组件向子组件传递数据 父组件向子组件传递数据相对简单，主要是通过props作为中间桥梁，下面是代码： <div id="app"> <input v-model="msg"> <child :message="m...
vue——父子组件的数据传递
weixin_54362381的博客
08-23 654
父子组件的数据传递 1、 父=>子（通过属性的形式）： （1）在子组件的标签里设置属性【如 :count=“0” 】。给属性前面加上冒号，参数‘0’会变成数字格式（变为一个js表达式）；不加冒号的话参数‘0’会是字符串形式。 （2）在子组件里通过props接收数据，如props:[‘count’]，子组件可以使用该数据，但不能修改改数据【这是因为Vue中的单向数据流，子组件只能使用父组件传过来的这个数据，而不能去直接修改这个数据】 （3）解决单向数据流子组件不能直接修改传过来的数据的问题： 在子组件里
Vue父子组件之间传递数据
friggly的博客
06-24 1357
vue父子组件之间相互传递数据应该是我们开发中最常见的场景，下面有几个小案例供大家参考借鉴
vue父子组件间互相传递数据
艾小逗
08-10 203
vue父子组件间传递参数 1.父传子 使用 props 向子组件传递数据。 在父组件中定义 hMsg参数，v:bind 绑定childMsg的值为hMsg； 子组件使用props获取父组件传递过来的数据 parent.vue <template> <div> <h2>parent</h2> <Child1 :child1Ms...
Vue父子组件之间的数据传递
LBY_XK的博客
05-14 126
传递的基本方式 父传子 <div id="app2"> <cpn :cmessage="message"></cpn> //绑定父组件的数据 </div> <template id="ap2"> <div> <div>组件化开发{{cmessage}}</div> </div> </templat
Vue组件交互详解：数据传递、父子组件通信与路由实战
"这篇文档详细介绍了Vue.js中的组件数据传递、父子组件之间的数据获取，以及Slot和Router路由功能。通过实例代码，展示了如何在Vue应用中实现这些功能，旨在帮助开发者理解和掌握相关操作技巧。" 在Vue.js中，组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值