vue祖孙组件传值（组件三层嵌套传值方法）

野性酷女 2022-11-13 04:14 437阅读 0赞

## 通过provide/inject可以轻松实现跨级访问祖先组件的数据 ##

先看代码实现效果吧  
父组件 index.vue

<template>
        
        <div class="views__home">
            <my-children></my-children>
        </div>
    </template>
    
    <script> import MyChildren from './my-children.vue'; // 子组件 export default { components: { MyChildren }, provide() { return { student: { name: 'xiaoming' } }; }, mounted() { console.log(this.student); // undefined } }; </script>

子组件 my-children.vue

<template>
        
        <div class="views__home__my-children">
            <my-grandson></my-grandson>
        </div>
    </template>
    
    <script> import MyGrandson from './my-grandson.vue'; // 孙组件 export default { components: { MyGrandson } }; </script>

孙组件 my-grandson.vue

<template>
        
        <div class="views__home__my-grandson"></div>
    </template>
    
    
    <script> export default { inject: ['student'], mounted() { console.log(this.student); // { name : 'xiaoming' } } }; </script>

可以看出来 my-grandson组件可以直接获取到 index组件传过来的变量，中间不在需要经过 my-children组件

需注意：父组件中无法对provide（）中的student进行数据更新操作，可换做如下写法：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]

## props方式（三级嵌套） ##

孙组件：想要接收的参数写入props  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]  
子组件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]  
父组件：直接动态绑定  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]: /images/20221022/a0f175da97744caf9c2cedbcc589f0b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/334593f5352e40eeae0ada5b07da6364.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/03888bdc9b564cc0947548f0658cb18d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/ccc3bee5ca8749a38f1bd1c0f5682e97.png