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 Array对象入门分析
Oct 30 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
php实现单链表的实例代码
2013/03/22 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
为你总结一些php信息函数
2015/10/21 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
JS实现放烟花效果
2020/03/10 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
django 2.0更新的10条注意事项总结
2018/01/05 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
大学生工作推荐信范文
2013/12/02 职场文书
中学生班主任评语
2014/01/30 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
布达拉宫的导游词
2015/02/02 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL