详解vue-router和vue-cli以及组件之间的传值
作者:老虎帅呆了 时间:2024-05-21 10:31:10
首先简单介绍使用vue-router的四个基本步骤:(为了方便演示,所有代码都写在一个文件里)
1.定义组件
2.定义路由
3.创建router实例并将定义好的路由传入
4.创建和挂载根实例
再来说一下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模板
页面布局:
一、从子级向父级传递数据
1、通过事件的方式从子级向父级传递数据:
在父级中使用了模块后通过下面的方式和子集进行通信,getChildDate是在父级中定义的方法,这个名字随便取,通过该方法接收子集传来的数据。Getfromchild是在子集中定义的方法,通过$emit(参数)的形式向父级传递数据,其中第一个参数是在父级中绑定的方法这里就是Getfromchild,第二个参数是要传递的数据,如有多个就写成数组。
<Child v-on:getfromchild="getChildDate"></Child>
2、通过传递对象的方式
如果是父级传数据到子级后,修改子集数据的同时父级也要跟着改变,可以使用另一种方式,在从父级往子级传的时候把要传的数据a放在一个对象里,把这个对象传过去,在子级中我们不去修改这个对象,而是修改他的属性a的值,父级中同样会跟着改变。
二、通过props的方式从父级向子级传递数据:
在父级中:fff是在子级中要用的名字,如果fff前面有:那么后面的hu就是个变量,在data中要去定义。如果没有那么就是普通字符串。
<Child :fff=”hu”></Child>
在子级中:用props去接收传来的数据
父组件:
子组件child
子组件child的子组件child1
子组件news
来源:http://blog.csdn.net/fanhu6816/article/details/54097921
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python图像处理库PIL的ImageEnhance模块使用介绍
![](https://img.aspxhome.com/file/2023/0/107650_0s.jpg)
ASP Framework_1_简介
详解MySQL下InnoDB引擎中的Memcached插件
如何利用JSHint减少JavaScript的错误
![](https://img.aspxhome.com/file/2023/2/123432_0s.png)
Oracle SQL性能优化系列学习二
SQL 将一列拆分成多列的三种方法
![](https://img.aspxhome.com/file/2023/4/98004_0s.jpg)
python人工智能tensorflow优化器Optimizer算法汇总
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
![](https://img.aspxhome.com/file/2023/0/99270_0s.png)
Mootools 1.2教程(2)——DOM选择器
Python中PyMySQL的基本操作
Python设置Word全局样式和文本样式的示例代码
![](https://img.aspxhome.com/file/2023/8/82558_0s.jpg)
Python 面向对象之封装、继承、多态操作实例分析
![](https://img.aspxhome.com/file/2023/4/102874_0s.png)
这种sql写法真的会导致索引失效吗
python判断一个集合是否包含了另外一个集合中所有项的方法
python sys模块使用方法介绍
![](https://img.aspxhome.com/file/2023/5/112435_0s.png)
一文学会使用OpenCV构建文档扫描仪
![](https://img.aspxhome.com/file/2023/1/70831_0s.png)
Pytes正确的配置使用日志功能
Windows上配置Emacs来开发Python及用Python扩展Emacs
ES5学习教程之Array对象
php实现HTML实体编号与非ASCII字符串相互转换类实例
![](https://img.aspxhome.com/file/2023/5/55545_0s.png)