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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
jquery中this的使用说明
Sep 06 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
JavaScript中DOM详解
Apr 13 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
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中die(),exit(),return的区别
2013/06/20 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python变量作用范围实例分析
2015/07/07 Python
python清理子进程机制剖析
2017/11/23 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
阿里旅行:飞猪
2017/01/05 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
SQL面试题
2013/04/30 面试题
大客户销售经理职责
2013/12/04 职场文书
语文教育专业求职信
2014/06/28 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis