Vue父组件向子组件传值以及data和props的区别详解


Posted in Javascript onMarch 02, 2020

1.在父组件中定义 msg 属性

data:{
  msg:'123 -我是父组件中的数据'
 },

2.引用子组件

父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用。

把父组件传递过来的 msg 属性,绑定到子组件的 parentmsg 属性上。

<com1 :parentmsg="msg"></com1>

3. 在子组件定义部分,需要把父组件传递过来的 parentmsg 属性,先在props数组中定义一下(代表这个属性是由父组件传递过来的),这样,才能使用这个数据

props:['parentmsg'],

4.在子组件中使用

template:"<h1>这是子组件--{{parentmsg}}</h1>",

5.子组件中data和props的区别

子组件中的data数据,不是通过父组件传递的是子组件私有的,是可读可写的。

子组件中的所有 props中的数据,都是通过父组件传递给子组件的,是只读的。

完整代码:

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
<body>
 <div id='app'>
 <!-- 父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,
 以属性绑定的形式,传递到子组件内部,供子组件使用 -->
 <com1 :parentmsg="msg"></com1>
 </div>
</body>
<script src="../lib/vue.js"></script>
<script>
 var vm = new Vue({
 el:'#app',
 data:{
  msg:'123-我是父组件中的数据'
 },
 components:{
  //子组件中无法访问父组件的data和methods
  com1:{
  //子组件中的data数据,不是通过父组件传递的是子组件私有的
  //data上的数据,是可读可写的
  data(){
   return {
   title:'123',
   content:'qqq'
   }
  },
  template:"<h1>这是子组件--{{parentmsg}}</h1>",
  //注意,组件中的所有 props中的数据,都是通过父组件传递给子组件的
  //只读
  props:['parentmsg'],//把父组件传递过来的parentmsg属性,
  //先在props数组中定义一下,这样,才能使用这个数据
  methods:{
  
  }
  }
 }
 })
</script>
</html>

Vue父组件向子组件传值以及data和props的区别详解

到此这篇关于Vue父组件向子组件传值以及data和props的区别详解的文章就介绍到这了,更多相关Vue父组件向子组件传值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js获取变量
Aug 24 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
用原生js做单页应用
Jan 17 Javascript
基本DOM节点操作
Jan 17 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 #Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 #Javascript
原生js实现日历效果
Mar 02 #Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 #Javascript
详解Vue中的Props与Data细微差别
Mar 02 #Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 #Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 #Javascript
You might like
德生H-501的评价与改造
2021/03/02 无线电
php表单转换textarea换行符的方法
2010/09/10 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
python Timer 类使用介绍
2020/12/28 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
大学生的四年学习自我评价
2013/12/13 职场文书
中层干部岗位职责
2013/12/18 职场文书
大学三年的自我评价
2013/12/25 职场文书
公司投资建议书
2014/05/16 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python