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 相关文章推荐
setTimeout和setInterval的深入理解
Nov 08 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
浅谈js的异步执行
Oct 18 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
理解php Hash函数,增强密码安全
2011/02/25 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
详解php协程知识点
2018/09/21 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
中文专业学生自我评价范文
2014/02/06 职场文书
大学生创业项目方案
2014/03/08 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
爱心捐书倡议书
2015/04/27 职场文书
同学会感言
2015/07/30 职场文书