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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
React-Native中props具体使用详解
Sep 04 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 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
php 数组的指针操作实现代码
2011/02/08 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
python追加元素到列表的方法
2015/07/28 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python的形参和实参使用方式
2019/12/24 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
C语言笔试题
2014/09/04 面试题
个人欠款担保书
2014/05/20 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
化验员岗位职责
2015/02/14 职场文书
Python中的程序流程控制语句
2022/02/24 Python