详解vue-router和vue-cli以及组件之间的传值


Posted in Javascript onJuly 04, 2017

首先简单介绍使用vue-router的四个基本步骤:(为了方便演示,所有代码都写在一个文件里)

1.定义组件

详解vue-router和vue-cli以及组件之间的传值

详解vue-router和vue-cli以及组件之间的传值

2.定义路由

详解vue-router和vue-cli以及组件之间的传值

3.创建router实例并将定义好的路由传入

详解vue-router和vue-cli以及组件之间的传值

4.创建和挂载根实例

详解vue-router和vue-cli以及组件之间的传值

再来说一下vue-cli

一、安装vue-cli脚手架工具

cnpm install vue-cli -g

二、 创建项目

vue init webpack-simple vue_webpack

使用的是webpack-simple模板,项目名为vue_webpack , webpack-simple和webpack模板区别就是少了代码检查和单元测试这些东西.

三、安装项目需要的依赖文件

进入vue_webpack项目文件夹

cnpm install 安装完成后 项目目录下会多出node_modules文件夹,所有依赖文件都在里面,现在可以测试项目是否创建成功: npm run dev,默认8080端口,需要修改可以到 package.json中在scripts的dev后面添加--port8000。

App.vue后缀为.vue的文件基本格式为:template + script + style 三部分组成

四、项目上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入 npm run build 来进行打包工作,

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

项目上线时,只需要将 dist 文件夹放到服务器就行了。

父组件和子组件之间进行数据传递:

在1.0中有$dispatch和$broadcast,但是在2.0中取消了,同样1.0中支持的双向数据绑定<Child :fff.sync=”hu”></Child>,在2.0中也不支持了现在依然还是使用下面的方式来做。

下面的例子中app为父组件,child和news为app的子组件,child1为child的子组件。下面将演示从app向另三个子组件传递数据 和 从三个子组件向app父组件传递数据。

先看一下目录结构:使用的是 webpack-simple模板

详解vue-router和vue-cli以及组件之间的传值

页面布局:

详解vue-router和vue-cli以及组件之间的传值

一、从子级向父级传递数据

1、通过事件的方式从子级向父级传递数据:

在父级中使用了模块后通过下面的方式和子集进行通信,getChildDate是在父级中定义的方法,这个名字随便取,通过该方法接收子集传来的数据。Getfromchild是在子集中定义的方法,通过$emit(参数)的形式向父级传递数据,其中第一个参数是在父级中绑定的方法这里就是Getfromchild,第二个参数是要传递的数据,如有多个就写成数组。

<Child v-on:getfromchild="getChildDate"></Child>

详解vue-router和vue-cli以及组件之间的传值

2、通过传递对象的方式

如果是父级传数据到子级后,修改子集数据的同时父级也要跟着改变,可以使用另一种方式,在从父级往子级传的时候把要传的数据a放在一个对象里,把这个对象传过去,在子级中我们不去修改这个对象,而是修改他的属性a的值,父级中同样会跟着改变。

二、通过props的方式从父级向子级传递数据:

在父级中:fff是在子级中要用的名字,如果fff前面有:那么后面的hu就是个变量,在data中要去定义。如果没有那么就是普通字符串。

<Child :fff=”hu”></Child>

在子级中:用props去接收传来的数据

父组件:

详解vue-router和vue-cli以及组件之间的传值

子组件child

详解vue-router和vue-cli以及组件之间的传值

子组件child的子组件child1

详解vue-router和vue-cli以及组件之间的传值

子组件news

详解vue-router和vue-cli以及组件之间的传值

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
jqgrid 简单学习笔记
May 03 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 #Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 #Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 #Javascript
详解node如何让一个端口同时支持https与http
Jul 04 #Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 #Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
如何掌握自荐信格式呢
2013/11/19 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
消防应急演练方案
2014/02/12 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
毕业生求职信
2014/06/10 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript