父子组件之间互相传递数据

最新推荐文章于 2023-09-05 23:36:13 发布
最新推荐文章于 2023-09-05 23:36:13 发布
阅读量80 收藏
点赞数
文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lkrdmm/article/details/109474459
版权

有的时候我们常常在父组件中通过点击事件弹出一个页面，也就是该父组件的子组件。我们可能在父组件上某个部分需要用到子组件上的某个数据，这个时候我们就需要用到emit技术

// 这是发射语句，第一个参数和接受语句的第一个参数一致；第二个参数是传递的数据
this.$root.eventHub.$emit('_c_faglInfo_popup_enlarge_water', res)

//这是接受语句，第一个参数需要和发射语句的第一个参数一致；第二个参数是接受发射语句的数据的函数
this.$root.eventHub.$on('_c_faglInfo_popup_enlarge_water',this.enlargeNarrowHandler)

这个非常实用！！！

lkrdmm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue基础】父子组件之间的数据传递
DrLemonPie的博客
04-02 2151
父组件向子组件传递数据 父组件要做的： 1.父组件import引用子组件； 2.在components中注册子组件； 3.通过v-bind属性向子组件中传值。 例如： <child :parent-name="parentName"></child> 子组件要做的： 4.子组件通过props获取父组件传递的值； props: { /* 通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收 */ parentName: {
父子组件传递数据
xiaowei的博客
10-25 560
效果（输入数据，点击按钮提交。点击数据可删除） 父-子：父组件通过v-band绑定数据，子组件props接收数据 子-父：子组件通过$emit触发父组件的自定义事件并且传递数据，父组件通过监听事件接收。 代码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head
vue父子组件传递数据
weixin_42594968的博客
09-23 97
/** * 父子组件传递数据 * 1)、子组件给父组件传递数据，事件机制 * 子组件给父组件发送一个事件，携带上数据 * this.$emit('事件名', 携带的数据...); * */ <el-tree :data="menus" :props="defaultProps" node-key="catId" ref="menuTree" @node-click="nodeclick"> nodeclick(data,node,component){ cons
父子组件间的数据传递
我不想说
03-09 254
<div id="app"> <counter count="1"></counter> <!--传递的这个0是个字符串--> <counter :count="2"></counter> <!--传递的这个0是个整形--> <!--为什么是这样？因为加了冒号：之后双引号里...
vue——父子组件的数据传递
weixin_54362381的博客
08-23 648
父子组件的数据传递 1、 父=>子（通过属性的形式）： （1）在子组件的标签里设置属性【如 :count=“0” 】。给属性前面加上冒号，参数‘0’会变成数字格式（变为一个js表达式）；不加冒号的话参数‘0’会是字符串形式。 （2）在子组件里通过props接收数据，如props:[‘count’]，子组件可以使用该数据，但不能修改改数据【这是因为Vue中的单向数据流，子组件只能使用父组件传过来的这个数据，而不能去直接修改这个数据】 （3）解决单向数据流子组件不能直接修改传过来的数据的问题： 在子组件里
在父子组件之间传递数据
weixin_66059613的博客
11-27 371
在父子组件之间传递数据
vue父子组件互相传值；各组件间传值
air_lemontree的博客
02-03 186
1. 父组件向子组件传值，父组件中定义值，子组件中props来接收      例：父组件中        &lt;div&gt;这是父组件   &lt;child ：received='fromParent'/&gt;     &lt;div&gt;              子组件中        &lt;div&gt;这是子组件   &lt;p&gt;{{ received }}&lt;...
09.组件间数据交互-父子组件间的通信
wl516372370的博客
06-05 208
父子组件的通信一、父组件向子组件传值 一、父组件向子组件传值 1.子组件内部通过“props”接收父组件传递过来的值 下面展示一个 全局定义的子组件。 <script src="../node_modules/vue/dist/vue.js"></script> <script> Vue.component('menu-item',{ //这里传递了两个属性 accept、content props:['accept','content']
Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
最新发布
m0_66468899的博客
09-05 134
html暂时不支持驼峰写法--子组件要或者外界（例如也可以是父组件）的数据，它是需要在自身标签上，使用props中自定义的属性来接收，若是想接收的数据来自父组件【Vue实例】------通过绑定属性（数据可以从vue实例中获取）-->--静态的prop-->--动态prop--></div><div><h1>cpn的内容</h1><ul></ul></div>
父子组件传值的几种方法
qq_36145755的博客
08-09 6950
一 Prop 向子组件传递数据，$emit监听子组件事件 //子组件 Vue.component('Child', { props: ['title'], template: '<h3>{{ title }}</h3>' }) //父组件调用 <Child title="My journey with Vue"></Child> //子组件 <button v-on:click="$emit('enlarge-text')">
vue父子组件传值的方法总结
qq_45337939的博客
08-17 2万+
一，父向子传值 1.通过props 使用技巧： 子组件内, props定义变量, 在子组件使用变量 父组件内, 使用子组件, 属性方式给props变量传值 注意事项： 父组件的数据发生了改变，子组件会自动跟着变 子组件不能直接修改父组件传递过来的props，会报错， props是只读的 子组件修改，不通知父级，会造成数据不一致 PS：父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新 总结: ..
vue父组件向子组件(props)传递数据的方法
顺其自然~专栏
03-30 1万+
vue页面结构 在做项目的时候常常有这样的一个情况，这个页面的数据（比如：id号）要带到另一个页面去查询某个数据的详情等，传统的做法不是在url上加参数，cookie或者是现在H5的“sessionStorage”和“localStorage”上赋值，这是页面之间传递的方法。 随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案。 最近就有一些小伙伴问我，vue组件之间是如何传递参数的？其实vue是有三种方式可以组件之间传递数据（props，组件通信，slot）..
父子组件之间传递数据的方法
m0_71213173的博客
11-27 2212
Vue.js还允许使用明确的方式定义属性，即通过一个对象而不是一个数组来定义一个组件的各种属性。从父组件向子组件传递数据是最主要的方式，可以通过组件的props（属性）和solt(插槽)来实现。在methods中增加onClick()方法，作用是将被单击时的时间记录到records数组中。在app.vue中为data增加一个与list并列的records属性，它的值是一个空的数组。向组件传递另一个组件的开闭标记之间的内容。app.vue通过props向greeting组件传递 “to” 属性的值。
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3976
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue父子组件之间传递数据
friggly的博客
06-24 1345
vue父子组件之间相互传递数据应该是我们开发中最常见的场景，下面有几个小案例供大家参考借鉴
Vue：父子组件间的数据交互
Specif1c的博客
03-28 280
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/v...
vue基础语法以及父子组件如何相互传值
热门推荐
zhang5207892的博客
11-05 2万+
vue模板引擎语法，关注数据层面 Mustache语法:{{msg}} 主要是用date控制 html赋值：v-html=”“ 绑定属性：v-bind:id=”“ 使用表达式：{OK?”yes”:”NO”} 文本赋值：v-text=”“ 指令：v-if=”“ 过滤器：{{message|capitalize}}和v-bind:id=”rawId|formatId” class和style绑定 对象
angular2父子组件之间传值
sanlingwu的博客
07-03 6911
组件结构如下：main.html&lt;div class="row"&gt; &lt;div class="col-sm-2 col-md-2 catalog"&gt; &lt;app-catalog [input]="catalogmsg" (event)="getData($event)"&gt;&lt;/app-catalog&gt; &am
VUE-props(父子组件之间的传值)
戴林峰的博客
11-28 1694
静态props 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项 使用Prop传递数据包括静态和动态两种形式，下面先介绍静态props 子组件要显式地用 props 选项声明它期待获得的数据 var childNode = { template: '<div>{{message...
作用域插槽父子组件互相传值
06-08
好的，这个问题我可以回答。作用域插槽是一种在父组件中定义模板，然后在子组件中使用的技术。通过作用域插槽，父组件可以向子组件传递数据，同时也可以接收子...这就是使用作用域插槽实现父子组件互相传值的基本方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值