详解vue-router和vue-cli以及组件之间的传值
首先简单介绍使用vue-router的四个基本步骤:(为了方便演示,所有代码都写在一个文件里) 1.定义组件2.定义路由 3.创建router实例并将定义好的路由传入 4.创建和挂载根实例 再来说一下vue-cli一、安装vue-cli脚手架工具二、 创建项目使用的是webpack-simple模板,项目名为vue_webpack,webpack-simple和webpack模板区别就是少了代码检查和单元测试这些东西. 三、安装项目需要的依赖文件进入vue_webpack项目文件夹
App.vue后缀为.vue的文件基本格式为:template + script + style 三部分组成 四、项目上线自己的项目文件都需要放到 src 文件夹下 项目开发完成之后,可以输入 npm run build 来进行打包工作, 打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看 项目上线时,只需要将 dist 文件夹放到服务器就行了。 父组件和子组件之间进行数据传递:在1.0中有$dispatch和$broadcast,但是在2.0中取消了,同样1.0中支持的双向数据绑定 下面的例子中app为父组件,child和news为app的子组件,child1为child的子组件。下面将演示从app向另三个子组件传递数据 和 从三个子组件向app父组件传递数据。 先看一下目录结构:使用的是 webpack-simple模板 页面布局: 一、从子级向父级传递数据1、通过事件的方式从子级向父级传递数据:在父级中使用了模块后通过下面的方式和子集进行通信,getChildDate是在父级中定义的方法,这个名字随便取,通过该方法接收子集传来的数据。Getfromchild是在子集中定义的方法,通过$emit(参数)的形式向父级传递数据,其中第一个参数是在父级中绑定的方法这里就是Getfromchild,第二个参数是要传递的数据,如有多个就写成数组。 2、通过传递对象的方式如果是父级传数据到子级后,修改子集数据的同时父级也要跟着改变,可以使用另一种方式,在从父级往子级传的时候把要传的数据a放在一个对象里,把这个对象传过去,在子级中我们不去修改这个对象,而是修改他的属性a的值,父级中同样会跟着改变。 二、通过props的方式从父级向子级传递数据:在父级中:fff是在子级中要用的名字,如果fff前面有:那么后面的hu就是个变量,在data中要去定义。如果没有那么就是普通字符串。 在子级中:用props去接收传来的数据 父组件: 子组件child 子组件child的子组件child1 子组件news 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |