详解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 相关文章推荐
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
详解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
Search Engine Friendly的URL设计
2006/10/09 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
python time模块用法实例详解
2014/09/11 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
在python里面运用多继承方法详解
2019/07/01 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
python实现猜拳游戏
2020/03/04 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
Delphi软件工程师试题
2013/01/29 面试题
自荐信的禁忌和要点
2013/10/15 职场文书
采购员岗位职责
2013/11/15 职场文书
工商企业管理实习自我鉴定
2013/12/04 职场文书
新领导上任欢迎词
2014/01/13 职场文书
中班开学寄语
2014/04/04 职场文书
环境保护建议书
2014/08/26 职场文书
世界气象日活动总结
2015/02/27 职场文书
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python