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 相关文章推荐
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
微信小程序 video组件详解
Oct 25 Javascript
实例解析Array和String方法
Dec 14 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
React Native 截屏组件的示例代码
2017/12/06 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
react-native动态切换tab组件的方法
2018/07/07 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
layui使用label标签的方法
2019/09/14 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python的多重继承的理解
2017/08/06 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
python使用zip将list转为json的方法
2018/12/31 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
python实现手势识别的示例(入门)
2020/04/15 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
美国在线印刷公司:PsPrint
2017/10/12 全球购物
导游经典开场白——导游词
2019/04/17 职场文书
导游词之上海豫园
2019/10/24 职场文书