Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >vue学习 十五 传值和传引用 or 事件传值(子传父)

vue学习 十五 传值和传引用 or 事件传值(子传父)

作者头像
meihuasheng
发布于 2021-03-16 13:33:04
发布于 2021-03-16 13:33:04
2.7K0
举报
文章被收录于专栏:phpcodersphpcoders

传引用: 传的就是对象(object)和数组(array);

传值: 传的就是字符串(string)、布尔(boolean)、数值(number);

主要表达的意思是:

在父传子组件中,数据写在父组件时;传引用的时候,改变一个数组或者对象都是将所有的改变;传值的话,改变哪个值就是改变哪个,不会影响到其他。。

在这里,通过pop方法出栈数组元素,然后点击一个删除,两个相同数组中的li都会减少一个1个,从而说明了传引用的时候改变数组中的元素,所有的都将改变

相反的,传数值的时候,改变一个地方,其他地方不会改变 其中点击头部的时候,title会变成change这样的,尾部也是同样的写法,然而却没有变化,这就证明了这一点

事件传值(子传父):

首先是子组件中,定义一个点击事件触发方法,然后方法为注册事件,如下。然后执行方法后就会在父组件中去找这个’事件名‘

$emit('事件名',’事件传的内容是什么‘);

父组件中给上面的’事件名‘绑定一个方法,参数是$event,然后实现这个方法 就可以拿到子组件中的数据了

methods:{ updateTitle(title){ 这个title是子组件中的title this.title=title; 将子组件中的title给现在的title } },

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/08/15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
cssjshtml vue.js 事件传值 子向父组件传值
子向父组件传值调用顺序: header.vue子组件调用: methods: { changetitle: function () { // this.title1 = 'changed'; this.$emit("titleChanged","子to父组件传值"); } } 去父组件app.vue找titleChanged: <app-header v-on:titleChanged="updatetitle($event)" v-bind:title1="title1"></
葫芦
2019/04/17
4.5K0
Vue.js 父组件向子组件传值和子组件向父组件传值
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/134784.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/18
5.5K0
Vue.js 父组件向子组件传值和子组件向父组件传值
Vue常用传值方式、父传子、子传父、非父子组件传值
在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。
IT工作者
2022/02/17
4.3K0
Vue非父子组件之间的传值
我们可以把一个网页拆分成很多部分,每个部分就是我们代码中的一个组件,左侧整个区域代表方块1,拆分成3个灰色区域代表方块2,左下区域又分成更小的2个深色区域,分别用2个方块3表示,右侧拆分成更小的3个深色区域用3个方块3表示
砖业洋__
2023/05/06
1.6K0
Vue非父子组件之间的传值
Vue-组件嵌套之——父组件向子组件传值
父组件向子组件传值步骤: 在这里先定义一下,相对本案例来说:App.vue是父组件,Second-module.vue是子组件。 一、首先,值肯定是定义在父组件中的,供所有子组件共享。所以要在父组件的
xing.org1^
2018/05/17
2.4K0
Vue子组件与父组件(看了就会)
<font color="red" size=4>另外,组件创建还有两种创建方式:
程序员海军
2022/02/15
1K0
vue子组件向父组件传值的方法
1、在子组件中,首先需要使用emit方法,该方法接收2个参数,第一个参数是事件的名称,自己随意定义。第二个参数是需要传递的数据,可以是对象,也可以是字符串类型。emit是VUE实例中的一个方法,所以前面要加上this,可以在钩子函数中执行,也可以由某个事件触发执行。
全栈程序员站长
2022/09/06
1.4K0
vue子组件向父组件传值的方法
vue通信-组件传值
通过以上三种方式, 我想你应该能解决绝大多数父子组件通信的场景了,但让我们再仔细考虑一下上面的通信场景,就会发现它们还可能存在的问题: 从子组件向父组件传递数据时,父子组件中的数据仍不是每时每刻都同步的,
leader755
2022/03/09
4.2K0
vue通信-组件传值
Vue组件之间传值
1.Vue组件之间传值 1.1父组件向子组件传值   1.组件内部通过props接收传递过来的值   2.父组件通过属性将值传递给子组件 父组件发送的形式是以属性的形式绑定值到子组件身上。 然后子组件用属性props接收 在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式的模板中没有这个限制 <div id="app"> <div>{{pmsg}}</div> <!--1、menu-item 在 APP中嵌套着 故 menu-item 为 子组件
梨涡浅笑
2022/01/06
1.2K0
Vue组件之间传值
vue父子组件传值
父组件可以在引用子组件的时候, 通过属性绑定(v-bind:) 的形式, 把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用。
砖业洋__
2023/05/06
5040
vue父子组件传值
Vue组件之间传值
父组件向子组件传值 父组件发送的形式是以属性的形式绑定值到子组件身上。 然后子组件用属性props接收 在props中使用驼峰形式,模板中需要使用短横线的形式,字符串形式的模板中没有这个限制 <div id="app"> <div>{{pmsg}}</div> <!--1、menu-item 在 APP中嵌套着 故 menu-item 为 子组件 --> <!-- 给子组件传入一个静态的值 --> <menu-item title=
星辰_大海
2020/12/07
1.4K0
Vue组件之间传值
Vue-自定义事件之—— 子组件修改父组件的值
如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你
xing.org1^
2018/05/17
1.2K0
Vue中父组件以及子组件传值问题
前言:在一些页面中不单单的纯纯的一个vue文件,vue讲究组件化开发,但是一般的肯定会产生交互事件,今天了解了这个传值,特此的来记录一下。
全栈程序员站长
2022/08/18
9060
Vue中父组件以及子组件传值问题
vue父组件操作子组件的方法_vue父组件获取子组件数据
我们经常分不清什么是父组件,什么是子组件。现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件。具体代码如下
全栈程序员站长
2022/09/19
7K0
vue父组件操作子组件的方法_vue父组件获取子组件数据
Vue2.0子父组件通信
1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为message的属性
疯狂的技术宅
2019/03/28
5140
Vue2.0子父组件通信
vue父子组件传值方法_vue父组件向子组件传递对象
<子组件名称 v-bind: 子组件中的props=”父组件中的data”></子组件名称>
全栈程序员站长
2022/10/04
2.1K0
vuejs — 父组件向子组件传值(父传子)「建议收藏」
(父组件)向(子组件)传值,那么子组件需要一个属性接收,大家应该都知道,使用 props 来接收;
全栈程序员站长
2022/08/26
1.4K0
vuejs — 父组件向子组件传值(父传子)「建议收藏」
uniapp父子组件传值
2.子组件中的miss方法中this.$emit(‘out’,“hahaha”); //向父组件提交一个事件和值
全栈程序员站长
2022/08/29
8700
uniapp父子组件传值
vue组件间通信
组件是 vue 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。我们需要使用特定的方式来实现组件间的数据通信,接下来让我们一个个介绍这几种类别的组件通信是如何实现的。
江拥羡橙
2022/11/15
1.1K0
vue组件间通信
vue组件之间的传值通信(vue props 对象 默认值)
朋友们可以百度下 Session Storage(程序退出销毁) 和 Local Storage(长期保存) 的区别。
全栈程序员站长
2022/08/01
2K0
vue组件之间的传值通信(vue props 对象 默认值)
相关推荐
cssjshtml vue.js 事件传值 子向父组件传值
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文