vue.js(18)--父组件向子组件传值
时间:2019-08-18
本文章向大家介绍vue.js(18)--父组件向子组件传值,主要包括vue.js(18)--父组件向子组件传值使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
子组件是不能直接使用父组件中数据的,需要进行属性绑定(v-bind:自定义属性名=“msg”),绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称。
props数组中的数据是只读的,父组件中的data是可读可写的。
子组件自己的data,子组件可直接访问,与父组件无关。
<div class="app"> <mycom1 v-bind:mymsg="msg"></mycom1> <!-- 子组件想要使用父组件中的数据时,需要通过在父组件上进行属性绑定(v-bind), 才能拿到父组件上的数据 --> </div> <template id="cmp1"> <div> <h1> 我是子一个组件+++我是父组件中的data通过props传递{{mymsg}} </h1> <h1>我是子组件中的data:{{mymsg1}}</h1> </div> </template> <script> var vm = new Vue({ el:'.app', data:{ msg:'hahahah' }, components:{ mycom1:{ template:'#cmp1', props:['mymsg'],//props是一个数组,用来定义属性绑定的父组件的数据,定义后才能使用 data() {//props中的数据是只读的,data中的数据是可读可写的 return{ mymsg1:'heheheheeh' }//这里的data是子组件自己的数据,子组件可以直接访问,与父组件无关 } } } }) </script>
原文地址:https://www.cnblogs.com/qiqisusu/p/11372916.html
- 苹果后端的Oracle数据库
- C#基础知识回顾--C#遍历enum类型、获取enum项个数
- 用香蕉也能玩电脑游戏—Tensorflow对象检测接口的简单应用
- 通过图片定位给一张图片添加多个链接
- Struts Interceptor Example
- 微信服务号模板消息接口新增"设置行业"和"添加模板"及细节优化
- WPF备忘录(3)如何从 Datagrid 中获得单元格的内容与 使用值转换器进行绑定数据的转换IValueConverter
- WPF备忘录(2)WPF获取和设置鼠标位置与progressbar的使用方法
- WPF文字修饰——上、中、下划线与基线
- 微信公众平台数据接口正式对所有认证公众号开放
- 参考基因组没有,经费也没那么多,怎么办?
- .Net下SQLite的DBHelp
- 数据库进程间通信解决方案之MQ
- 【学术】算法交易的神经网络:强化经典策略
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JS去除字符串的空格
- insertionSoft(插入排序) 2.1-1 And 重写insertionSoft 2.1-2
- Swagger-Springboot-mybatis-mysql
- Python+java+websocket+SpringMVC实时监控数据库中的表
- 基于Java图形界面的IPV4与网址的地址解析器
- 如何在千里之外能访问自己的电脑?(FRP)
- 三分钟Docker-镜像、容器实战篇
- 看懂今天这个!你就是个真正的javaer!
- 猿进化系列7——一文搞懂IO
- 猿进化系列13——一文搞懂MVC相关框架套路
- 猿进化系列16——实战之一学会SQL开发正确姿势
- 猿进化系列17——实战之一文学会前后端分离套路
- 基于Java的模拟写字板的设计与实现
- 猿思考系列2——一文搞懂同步并发套路
- 猿思考系列3——一文搞懂单例和思考的套路