vue两组件间值传递 $router.push实现方法


Posted in Javascript onMay 15, 2019

两组件间传值,可能包含多种情况,有父子组件和非父子组件,对于父子组件网上有很详细的方法讲解,但非父子组件传值有用bus总线,还有一些其他方法,其中的使用路由跳转的方法讲解太过简洁,难以理解。因为是公司项目,采用的是公司封装的UI框架,但基本上还是采用vue框架,ts编写。所以一些样式结构可能没有参考价值,但我会讲解清楚每一部分作用,主要是路由跳转部分的代码实现。

首先,需求如下图,树状列表每一项有一个编辑按钮,点击按钮之后跳转到另一个路由页面,会将树状列表中每一项数据带过来。

vue文件部分:

<tree
  :data="dataList"
  node-key="id"
  default-expand-all
  :expand-on-click-node="false">
  <span class="custom-tree-node" slot-scope="{ node, data }" :class="$style.list">
    <span :class="$style.listText">{{ node.label }}</span>
    <span :class="$style.listBtn">
      <button
        :class="$style.btn"
        type="text"
        size="mini"
        @click="() => edit(data)">
      </button>
    </span>
  </span>
</tree>
<router-view></router-view>

这是封装好的树状列表,使用 scoped slot 会传入两个参数 node 和 data ,分别表示当前节点的 Node 对象和当前节点的数据。当点击button会路由跳转页面显示在 <router-view>中。

那我们先来看一下ts中edit这个方法是怎么写的。

edit(info: Idata) {
  this.$router.push({
    name: `ListEdit`,
    query: {
      label: info.label,
      scene: info.scene,
    },
  });
},

终于看到主角 $router.push ,它会带两个参数,name表示即将跳转到的路由名字,还有一个参数可以是query,也可以是params,它们的区别简单来说,就相当于 get 和 post ,query == get ,params == post,query 会把携带的参数显示在 url 中。那query中的参数就是所需要携带的参数,那这一步总体来说就意味着跳转到ListEdit这个路由页面,并携带label、scene 这两个参数。

至于其中的 info:Idata 这样的写法是因为ts,ts接口了解一下。

现在编辑按钮这部分内容ok了,它确定了要跳转的地方还有需要携带的参数,那么我们这个ListEdit路由页面就应该做好准备接收人家带来的参数呀。在页面创建期间和路由发生改变期间,都会有一个传值的动作,那就再created钩子函数和监听路由函数中写入代码。

created() {
  const {label= "", scene= ""} = this.$route.query;
  this.form = {
    name: label.toString(),
    initScene: scene.toString(),
  };
},
watch: {
  $route(to, from) {
    if (to.path === "/list/listEdit") {
      const {label= "", scene= ""} = to.query;
      this.form = {
        name: label.toString(),
        initScene: scene.toString(),
      };
    }
  },
},

我感觉这样半截的代码实在难以说明,name、initScene都是前面定义的,还是放出完整代码体验一下吧。

树状列表编辑按钮vue文件部分:

<template>
  <tree
    :data="dataList"
    node-key="id"
    default-expand-all
    :expand-on-click-node="false">
    <span class="custom-tree-node" slot-scope="{ node, data }" :class="$style.list">
      <span :class="$style.listText">{{ node.label }}</span>
      <span :class="$style.listBtn">
        <button
          :class="$style.btn"
          type="text"
          size="mini"
          @click="() => edit(data)">
        </button>
      </span>
    </span>
  </tree>
  <router-view></router-view>
</template>
<script src="./index.ts" lang="ts"></script>

树状列表编辑按钮ts文件部分:

import Vue from "vue";
interface Idata {
  id: string;
  label: string;
  scene: string;
  children?: Idata[];
}
export default Vue.extend({
  data() {
    const data: Idata[] = [{
      id: "1",
      label: "1",
      scene: "场景1",
    }, {
      id: "2",
      label: "2",
      scene: "场景2",
      children: [{
        id: "4",
        label: "2-1",
        scene: "场景1",
      }],
    }, {
      id: "3",
      label: "3",
      scene: "场景2",
    }];
    return {
      data,
      dataList: JSON.parse(JSON.stringify(data)),
    };
  },

  methods: {
    edit(info: Idata) {
      this.$router.push({
        name: `VisListEdit`,
        query: {
          label: info.label,
          scene: info.scene,
        },
      });
    },
  },

});

这里,ts接口定义可以递归实现,children的类型定义还是Idata,就可以直接自我调用。

ListEdit 路由页面vue文件部分:

<template>
  <div>
    <form :model="form" ref="form">
      <form-item :label="目录名称">
        <input v-model="form.name"></input>
      </form-item>
      <form-item :label="选择场景">
        <select v-model="form.initScene" placeholder="请输入场景">
          <option  
            v-for="item in sceneOption" 
            :key="item.id" 
            :label="item.name" 
            :value="item.id"> 
          </option>
        </select>
      </form-item>
    </form>
    <div>
      <button type="primary" @click="submitForm">保存</button>
    </div>
  </div>
</template>
<script src="./index.ts" lang="ts"></script>

ListEdit 路由页面ts文件部分:

import Vue from "vue";
interface Iscenes {
  id: string;
  name: string;
  selected: boolean;
}
export default Vue.extend({
  data() {
    const sceneOption: Iscenes[] = [{
      id: "1",
      name: "场景1",
      selected: false,
    },{
      id: "2",
      name: "场景2",
      selected: false,
    },{
      id: "3",
      name: "场景3",
      selected: false,
    }];
    return {
      form: {
        name: "",
        initScene: "",
      },
      sceneOption,
    };
  },
  created() {
    const {label= "", scene= ""} = this.$route.query;
    this.form = {
      name: label.toString(),
      initScene: scene.toString(),
    };
  },
  watch: {
    $route(to, from) {
      if (to.path === "/list/listEdit") {
        const {label= "", scene= ""} = to.query;
        this.form = {
          name: label.toString(),
          initScene: scene.toString(),
        };
      }
    },
  },
  methods: {
    submitForm() {
      console.log("test");
    }
  },

});

最后,再来看一下,路由部分的配置:

import ListDetail from "../views/list-detail/index.vue";
import List from "../views/list/index.vue";
import { MenuConfig } from "./index";

export const listRouter: MenuConfig = {
  path: "/list",
  component: List,
  title: "目录管理",
  key: "list",
  name: "list",
  hasPermission: true,
  subShow: false,
  children: [{
    path: "listEdit",
    title: "编辑目录",
    hasPermission: true,
    name: "ListEdit",
    key: "ListEdit",
    component: ListDetail,
  }],
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 获取事件对象的注意点
Jul 29 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
js+html实现点名系统功能
Nov 05 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 #Javascript
详解微信UnionID作用
May 15 #Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 #Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 #Javascript
详解小程序用户登录状态检查与更新实例
May 15 #Javascript
基于vue如何发布一个npm包的方法步骤
May 15 #Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
AngularJS快速入门
2015/04/02 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
python使用turtle库绘制树
2018/06/25 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
python中count函数简单用法
2020/01/05 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
struct和class的区别
2015/11/20 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
通用自荐信范文
2014/03/14 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android