vue两组件间值传递 $router.push实现方法
两组件间传值,可能包含多种情况,有父子组件和非父子组件,对于父子组件网上有很详细的方法讲解,但非父子组件传值有用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, }], };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。