Vue一个例子看懂父子组件之间传值

栏目: 编程语言 · 发布时间: 5年前

内容简介:最近在做vue的项目,发现项目中有很多功能是重复的,这时我们就需要想到将这一部分的功能做成一个组件来减少我们的代码量,使代码看起来更加的简洁,优美.下面我们就来谈谈封装公共组件时遇到的一些问题这个是最简单的,首先父组件通过components引入子组件,如果要传入子组件的值是动态的.可以将该值双向绑定在调用的子组件上,子组件只需要做一件事,那就是通过props接收,如下:父组件

最近在做vue的项目,发现项目中有很多功能是重复的,这时我们就需要想到将这一部分的功能做成一个组件来减少我们的代码量,使代码看起来更加的简洁,优美.下面我们就来谈谈封装公共组件时遇到的一些问题

1.父组件往子组件中传值

这个是最简单的,首先父组件通过components引入子组件,如果要传入子组件的值是动态的.可以将该值双向绑定在调用的子组件上,子组件只需要做一件事,那就是通过props接收,如下:

父组件 Vue一个例子看懂父子组件之间传值

子组件

Vue一个例子看懂父子组件之间传值

2.子组件往父组件传值

可以定义一个事件来触发响应的$emit使父组件可以知道有事件改变,进而接收对应的参数,如下:

父组件

Vue一个例子看懂父子组件之间传值

Vue一个例子看懂父子组件之间传值

子组件

Vue一个例子看懂父子组件之间传值

Vue一个例子看懂父子组件之间传值

3.子组件改变父组件传来的值

正常,基于vue的单项数据流,子组件是不允许直接对父组件传来的值进行修改的,所以我们应该避免这种直接修改父组件传来值的操作.

当子组件这样来操作的话,会报

Vue一个例子看懂父子组件之间传值

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "realshow"这样的错误 Vue一个例子看懂父子组件之间传值

报错的意思就是我上面所说的子组件不允许修改

我们只需要这样修改就可以了

Vue一个例子看懂父子组件之间传值

这里需要注意一点,就是watch这一块儿,如果单单只通过第2步来试图将父组件传过来的值进行赋值的话,子组件realnameshow这个值并不会随着父组件realshow 的值进行改变,因为data只是一个初始值,所以我们才需要watch这个属性来动态的修改realnameshow这个参数

好了,关于父子组件之间的传值问题大概就是这些,大家可以参考参考,前端菜鸟一个,可能会有些出入,欢迎留言提出一些建议

个人创作,未经允许不可擅自转载


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大数据

大数据

涂子沛 / 广西师范大学出版社 / 2013-4-1 / 49.90元

公布官员财产美国是怎么做的,美国能让少部人腐败起来吗,美国式上访是怎么回事,凭什么美国矿难那么少,全民医改美国做得到吗,美国总统大选有什么利器才能赢,下一轮全球洗牌我们世界工厂会被淘汰吗…… 除了上帝,任何人都必须用数据来说话。 大数据浪潮,汹涌来袭,与互联网的发明一样,这绝不仅仅是信息技术领域的革命,更是在全球范围启动透明政府、加速企业创新、引领社会变革的利器。现代管理学之父德鲁克有......一起来看看 《大数据》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具