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打印指定区域Html页面并自动分页
Jul 04 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
javascript实现完美拖拽效果
May 06 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
jquery实现手风琴案例
May 04 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
深入理解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
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
详解JS预解析原理
2020/06/16 Javascript
详解python的几种标准输出重定向方式
2016/08/15 Python
Python的标准模块包json详解
2017/03/13 Python
Python常见异常分类与处理方法
2017/06/04 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
dpn网络的pytorch实现方式
2020/01/14 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
大学生实习证明范本
2014/01/15 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
六一儿童节开幕词
2015/01/29 职场文书
新郎接新娘保证书
2015/05/08 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫