Vue - Vue 路由 - 组件通信 —＞ 父组件 —＞子组件的参数传值 、父组件触发子组件的函数

缺乏、安全感 2024-03-16 11:58 109阅读 0赞

一、Vue 路由 —＞ 父组件 —＞子组件的参数传值

序言

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

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

实现方法

  1. Vue 路由的配置文件：参数从路由这里开始传递 testindex: '0'

    const router = new VueRouter({

    mode: ‘history’,
    base: __dirname,
    routes: [{

    1.   path: '/test',
    2.   component: testfather,
    3.   props:{
    4.  testindex: '0'}

    },
    ]
    });

  2. 父组件配置：父组件接收到路由传递的参数值 testindex: '0'，然后再发送给子组件的参数 getindex，注意冒号 : 是通信接收对象的指定操作

  3. 子组件配置：子组件接收到了父组件发送的消息，type 限定参数类型为字符串类型，default默认值是 ‘-1’

个人理解

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

最后，最好是不要直接使用 props 的参数，最好是赋予给另外的参数，该参数是被父组件所引用的，所以如果该 props 内的参数在子组件内有所变化，父组件也会被跟着变化，而且还有可能会报错，如上所示，子组件内的 props 的参数 getindex ，笔者是重新赋予给其他的参数 testdata

参考链接

1. vue中 关于$emit的用法

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

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

4. Vue路由组件传参

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

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

二、父组件触发子组件的函数

参考链接：

vue父组件触发子组件事件

发表评论

表情：
评论列表 （有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读