vue父子组件传值:详解父组件向子组件传值(props)
vue父子组件传值:父组件向子组件传值用的是props
1.定义父组件
1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件。
2)这个自定义属性的属性值是用来存放父组件向子组件传递的数据。
3)在这里,name即是要传的数据,需要在data定义,所以当传递的数据时字符串类型时,可以在data定义为 name:''
父组件如下:
2.定义子组件
1)子组件使用props属性接收父组件传递过来的值。
写法是:
props:{父组件自定义的属性:该值的类型,required:true}
所以在这里是:
props: {inputName: String,required: true}
2)然后可以直接在页面上以这个形式“{{}}”引用。
子组件如下:
代码:
1.父组件代码如下:
<template><div>父组件:<input type="text" v-model="name"><br><br><!-- 引入子组件 --><child :inputName="name"></child></div>
</template>
<script>import child from './child'export default {components: {child},data () {return {name: ''}}}
</script>
2.子组件代码
<template><div>子组件:<span>{{inputName}}</span></div>
</template>
<script>export default {// 接受父组件的值props: {inputName: String,required: true}}
</script>
vue父子组件传值:详解父组件向子组件传值(props)相关推荐
- ueditor上传组件显示乱码_最全面的移动端 UI组件设计详解:中篇
上一期给大家讲解了<最全面的移动端UI组件设计详解:上篇>,主要分享了:布局组件和导航组件2个部分:这次给大家带来:基础组件.表单组件和反馈组件详解,希望你在设计APP.小程序.H5页面中 ...
- Vue组件间传值详解
文章目录 1. 父组件向子组件传值 1.1 描述 1.2 props接收数据: 2. 子组件向父组件传值 3. 兄弟组件间传值 4. 事件总线 5. Ref 6. root/parent/childr ...
- vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
- vue高级进阶( 二 ) 8种组件通信详解
猛兽总是独行,牛羊才成群结队. -------鲁迅 vue组件通信的重要性无需多言...但是你肯定没有全部掌握,所以这第二篇文章应运而生 props和$emit props父传子,$emit子传父,看 ...
- 数据列表 多选 html,Vue多选列表组件深入详解
这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行 ...
- php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
- Vue组件-Confirm详解
Vue组件-Confirm详解 原作者:爱扎马尾的小狮子 一.使用的地方引用,传入属性和方法 在需要的地方引入组件,然后传入对应的属性和方法 组件 <template> <div : ...
- vue组件component详解
vue组件component详解 组件介绍 组件: 组件是拥有一定功能多个html标签的集合体,是对html标签的封装. 好处: 模板中为了实现一个(例如分页)效果,需要绘制20个html标签 ...
- 微信小程序父子组件通信详解
1 父组件向子组件传递数据: 1.1 在父组件的文件夹中的.json文件下引入子组件 {"usingComponents": {//"Tab" 是自己定义的组件 ...
最新文章
- python中的os.mkdir和os.makedirs的使用区别,以及如何查看某个模块中的某些字母开头的属性方法
- golang中的Session支持
- collapse mode 严重_从泛化性到Mode Collapse:关于GAN的一些思考
- QT的QDataStream类的使用
- 腾讯IVWEB前端工程化工具feflow思考与实践
- 苹果终于迷途知返?还是指纹识别更香...
- BOM(浏览器对象模型)
- vue ---- webpack中loader
- android 二级 滚动,android使用 ScrollerView 实现 可上下滚动的分类栏实例
- Android性能优化---布局优化
- CentOS6 x86_64最小化安装优化脚本
- Android studio 下载SDK
- opencv遍历像素输出像素值
- ffmpeg截取jpg图_使用ffmpeg进行视频封面截取
- wordpress博客 qq客服插件
- 我的身体为什以会这样?如何诊治?
- 在会计研究中使用Python进行文本分析
- gps wifi信号测试软件,搜星+WiFi+EMI 导航平板信号性能横评
- python 类和对象 atm_Python实现ATM提款机系统
- 【如何快速的开发一个简单的iOS直播app】(代码篇)