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这个参数

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

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


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

查看所有标签

猜你喜欢:

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

动手玩转Scratch2.0编程

动手玩转Scratch2.0编程

马吉德·马吉 (Majed Marji) / 电子工业出版社 / 2015-10-1 / CNY 69.00

Scratch 是可视化的编程语言,其丰富的学习环境适合所有年龄阶段的人。利用它可以制作交互式程序、富媒体项目,包括动画故事、读书报告、科学实验、游戏和模拟程序等。《动手玩转Scratch2.0编程—STEAM创新教育指南》的目标是将Scratch 作为工具,教会读者最基本的编程概念,同时揭示Scratch 在教学上的强大能力。 《动手玩转Scratch2.0编程—STEAM创新教育指南》共......一起来看看 《动手玩转Scratch2.0编程》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具