详解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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
Jquery-data的三种用法
Apr 18 jQuery
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
JS实现判断移动端PC端功能
Feb 21 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获取访问者浏览页面的浏览器类型
2017/01/23 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
python读写文件操作示例程序
2013/12/02 Python
全面解读Python Web开发框架Django
2014/06/30 Python
python批量生成本地ip地址的方法
2015/03/23 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
分析Python中解析构建数据知识
2018/01/20 Python
Python使用folium excel绘制point
2019/01/03 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
退伍老兵事迹材料
2014/01/31 职场文书
授权委托书样本
2014/04/03 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
生日答谢词
2015/01/05 职场文书
员工辞职信范文
2015/03/02 职场文书
义诊活动通知
2015/04/24 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server