vue2.0 父组件给子组件传递数据的方法


Posted in Javascript onJanuary 15, 2018

在父组件 App.vue 中引用子组件 A.vue,把 name 的值传给 A 组件。

1、安装

在桌面新建一个文件夹

$ cd 到文件中
$ npm install -g vue-cli
$ vue init webpack . 
$ npm install
$ npm run dev

vue init webpack . 之后的选择解释

vue2.0 父组件给子组件传递数据的方法

2、删除

1、删除App中的一些内容如下

2、删除components文件中的HelloWorld.vue

vue2.0 父组件给子组件传递数据的方法

3、修改

修改App.vue

如下:

<template>
 <div id="app">
 // message 定义在子组件的 props 中
 <A v-bind:message="name"/>
 </div>
</template>
<script>
import A from './components/A'
export default {
 name: 'App',
 components: {
  A
 },
 data(){
  return{
   name:"我就是数据啊"
  }
 }
}
</script>

4、新建

在components新建A.vue并写入内容如下:

<template>
 <div>{{message}}</div>
</template>
<script>
 export default {
  props: ['message'] //接受message传过来的数据
 }
</script>

5、最后

在命令行输入

$ npm run dev

vue2.0 父组件给子组件传递数据的方法

总结

以上所述是小编给大家介绍的vue2.0 父组件给子组件传递数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery ui resizable bug解决方法
Oct 26 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 #Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 #Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 #Javascript
js实现一个简单的MVVM框架示例
Jan 15 #Javascript
详解angularjs 学习之 scope作用域
Jan 15 #Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 #Javascript
关于axios如何全局注册浅析
Jan 14 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Python:slice与indices的用法
2019/11/25 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
煤矿班组长的职责
2013/12/25 职场文书
法律进学校实施方案
2014/03/15 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书