Vue

2023-06-02 18:26| 来源: 网络整理| 查看: 265

序言

笔者遇到了一个比较特殊的设计要求，从 Vue 路由传递某个参数给某个组件，然后在使用这个父组件将这个参数传递给子组件，看似挺复杂的，其实实现后，还是挺简单的。

可以说下方的参考链接好坏掺杂，本文是笔者提取了参考链接内的精华部分所写。

实现方法

Vue 路由的配置文件：

const router = new VueRouter({ mode: 'history', base: __dirname, routes: [{ path: '/test', component: testfather, props:{ testindex: '0'} }, ] });

父组件配置：

import testchild from "../components/testchild"; export default { name: 'testfather', components: { testchild }, props: ['testindex'], data() { return { } }, }

子组件配置：

--------------- 测试 --------------- 这是传递的参数使用方法作为中间件 {{ curractive }} 这是传递的参数 {{ getindex }} export default { name: 'testchild', props: { getindex: { type: String, default: '-1' }, }, data() { return { } }, computed:{ curractive:function (){ console.log("test 用这个computed 的方法也是可以的，效果一样", this.getindex) return this.getindex } }, } 个人理解

props：该参数可以说数组类型，比如[a, b, c ] ，也可以说对象类型，比如{a:{ type: String, default: '' } }的，但如果是在使用对象类型的数据格式限制时，请注意传递的参数格式类型是否对的上。

参考链接

1. vue中关于$emit的用法

2. Vue中父子组件如何传值

3. ⑩ Vue父组件向子组件传值

4. Vue路由组件传参

5. Vue中父组件向子组件传递数据的几种方法

6. 超详细的Vue渲染原理讲解

【本文地址】

Vue

Vue

今日新闻

推荐新闻