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实现瀑布流列式布局
Jan 29 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
canvas实现钟表效果
Feb 13 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
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下使用SimpleXML 处理XML 文件
2010/02/27 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
JS实现合并json对象的方法
2017/10/10 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
详解React 条件渲染
2020/07/08 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
pytorch permute维度转换方法
2018/12/14 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python中断多重循环的思路总结
2019/10/04 Python
python循环输出三角形图案的例子
2019/11/22 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
Django数据库操作之save与update的使用
2020/04/01 Python
个人剖析材料及整改措施
2014/10/07 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
道歉短信大全
2015/05/12 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
JVM之方法返回地址详解
2022/02/28 Java/Android
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers