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 随机数产生6位数字
May 13 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
整理一下常见的IE错误
Nov 18 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 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正则走开
2008/03/15 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
javascript 函数速查表
2010/02/07 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python中的函数作用域
2018/05/07 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Python模块常用四种安装方式
2020/10/20 Python
如何通过python检查文件是否被占用
2020/12/18 Python
台湾专柜女包:KINAZ
2019/12/26 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
外语专业毕业生个人的自荐信
2013/11/19 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript