详解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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
javascript iframe内的函数调用实现方法
Jul 19 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
p5.js临摹动态图形的方法
Oct 23 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
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
常用的javascript function代码
2008/05/23 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
小程序云开发初探(小结)
2018/10/24 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
安全演讲稿大全
2014/05/09 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
代领毕业证委托书
2014/08/02 职场文书
企业法人代表证明书
2014/09/27 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
会议邀请函
2015/01/30 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2015年企业工作总结范文
2015/04/28 职场文书