详解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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
js 操作select相关方法函数
Dec 06 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
jquery编写日期选择器
Mar 16 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
JavaScript实现登录窗体
Jun 22 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
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
mailto的使用技巧分享
2012/12/21 Javascript
js select option对象小结
2013/12/20 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Django中使用Celery的方法步骤
2020/12/07 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
银行实习鉴定
2013/12/13 职场文书
廉政教育心得体会
2014/01/01 职场文书
前台接待员岗位职责
2014/01/02 职场文书
开学典礼决心书
2014/03/11 职场文书
产品售后服务承诺书
2014/05/21 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
PHP解决高并发问题
2021/04/01 PHP
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
原生JS实现分页
2022/04/19 Javascript