详解vue-router和vue-cli以及组件之间的传值

首先简单介绍使用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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

    详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

    windows下vue-cli及webpack 构建网站(一)环境安装 windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli及webpack 构建网站(三)使用组件 1.本篇文章是建立在以上三篇文章的基础上的. 2.安装 vue-router 插件,运行cmd进入到项目目录下面,运行以下命令: cnpm install vue-router --save-dev 3.在src文件夹下面新建一个文件夹page用于存放模板文件,然后

  • 在vue-cli脚手架中配置一个vue-router前端路由

    前言 这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容,分享出来供打击参考学习,下面来一起看看详细的介绍: 首先你需要一个main.js文件 //然后引入vue-router import VueRouter from 'vue-router'; //使用路由 Vue.use(VueRouter); //当然如果需要有组件进来的时候也是需要引入的 import Home from '../components/Home.vue'; import New

  • vue-cli之router基本使用方法详解

    本文实例为大家分享了vue-cli之router基本使用的具体代码,供大家参考,具体内容如下 1.在src目录下新建router目录,再建立index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import goods from '@/components/goods/goods'; Vue.use(VueRouter); export default new VueRouter({ routes: [ { pat

  • 详解win7 cmd执行vue不是内部命令的解决方法

    详解win7 cmd执行vue不是内部命令的解决方法

    详解win7 cmd执行vue不是内部命令的解决方法 通过全局安装vue-cli npm install --global vue-cli 在cmd中运行vue提示不是内部命令,原因是环境变量没有加上 找到npm的位置:(不在这个位置的全局搜索vue.cmd即可) C:\Users\Administrator\AppData\Roaming\npm 打开我的电脑-->右键属性-->高级系统设置-->环境变量-->Path-->添加获得npm的位置,保存,重启cmd命令工具即可

  • Vue 使用Props属性实现父子组件的动态传值详解

    如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo

  • 详解vue组件之间相互传值的方式

    概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

  • 详解如何实现在Vue中导入Excel文件

    详解如何实现在Vue中导入Excel文件

    目录 一.安装依赖 二.template中 三.script中js代码 以将此Excel导出为json数据为例 一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.template中 <span>导入表格</span> <input id="upload" type="file" @chan

  • Vue.js中兄弟组件之间互相传值实例

    兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script

  • 详解PowerDesigner之CDM、PDM、SQL之间转换

    详解PowerDesigner之CDM、PDM、SQL之间转换

    详解PowerDesigner之CDM.PDM.SQL之间转换 前段时间用了下PowerDesigner做了一些辅助工作.在此特地小结一下: 有关CDM.PDM.SQL之间转换以及不同数据库之间库表Sql的移植,首先要了解的是它们各自的用途.这里就简单的描述一下,不做详细的解释了. CDM:概念数据模型.CDM就是以其自身方式来描述E-R图.它不考虑物理实现的细节,只表示数据库的整体逻辑结构,独立于任何软件和数据存储结构. PDM:物理数据模型.考虑了数据库的物理实现,包括软件和数据存储结构,即

  • vue中通过使用$attrs实现组件之间的数据传递功能

    组件之间传递数据的方式有很多种,之所以有这么多种方式,是为了满足在不同场景不同条件下的使用. 一般有三种方式: props vuex Vue Event Bus 本文介绍的是使用$attrs的方式. 这是$attrs的官网api https://cn.vuejs.org/v2/api/#vm-attrs 这个api是在2.4版本中添加的,那么为什么要添加这个特性呢? 看看官网是怎么解释的 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class  和  style  除外

  • 详解IDEA中SpringBoot整合Servlet三大组件的过程

    Spring MVC整合 SpringBoot提供为整合MVC框架提供的功能特性 内置两个视图解析器:ContentNegotiatingViewResolver和BeanNameViewResolver 支持静态资源以及WebJars 自动注册了转换器和格式化器 支持Http消息转换器 自动注册了消息代码解析器 支持静态项目首页index.html 支持定制应用图标favicon.ico 自动初始化Web数据绑定器:ConfigurableWebBindingInitializer Sprin

  • 详解对于React结合Antd的Form组件实现登录功能

    一.React 结合 Antd 实现登录功能 引入所需的 Antd 组件,代码如下所示: import { Form, Icon, Input, Button, message } from 'antd' 在 Login.jsx 中,创建一个 Login 组件.当对外暴露组件时,需要使用 Form 组件进行包装,包装 Form 组件生成一个新的组件 Form(Login),同时新组件会向 Form 组件传递一个强大的对象属性 form,这样就可以取到 Form 表单的值,这也是高阶组件和高阶函数

  • vue组件之间进行传值的方法

    vue组件之间进行传值的方法

    目录 前言 1.父组件向子组件进行传值 2.子组件向父组件进行传值 3.非父子组件之间的传值 总结 前言 目前在做vue的项目,用到了子组件依赖其父组件的数据,进行子组件的相关请求和页面数据展示,父组件渲染需要子组件通知更新父组件的state,父子组件之间的传值一般有三种方法: 父传子子传父非父子传值 注意: 父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息.  接下来,我们会通过实例代码来看的更清晰,理解更容易:

随机推荐