跨组件属性传递

最新推荐文章于 2025-03-09 10:09:01 发布

weixin_34343000

最新推荐文章于 2025-03-09 10:09:01 发布

阅读量202

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cce7afae51d453f146bb8d5

博客介绍了Vue和React组件数据传递方法。在Vue中，组件嵌套深时属性传递繁琐，可直接将组件属性传递；当组件未声明某些内容时，会包含父作用域绑定。在React中，Context可在组件树间无需每层手动添加就能进行数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue

在Vue中一般组件之前的通讯是通过属性的方式传递数据，但是当组件嵌套比较深的情况下，属性传递明显比较繁琐。比如下面我写了三个组件，App组件把属性传递给Toolbar组件，然后再传递给ThemeButton，那么可以使用$attrs把App组件的属性直接传递给ThemeButton。

  <div id="app">
    <App />
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      components: {
        'App': {
          template: `<div><toolbar theme="dark" /></div>`,
          components: {
            'Toolbar': {
              props: ['theme'],
              template: '<div><theme-button :theme="theme" /></div>',
              components: {
                'ThemeButton': {
                  props: ['theme'],
                  template: '<button>{{theme}}</button>',
                }
              }
            }
          }
        }
      }
    })
  </script>
复制代码

当一个组件没有声明任何 prop 时，$attrs会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。

  <div id="app">
    <App />
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      components: {
        'App': {
          template: `<div><toolbar theme="dark" /></div>`,
          components: {
            'Toolbar': {
              template: '<div><theme-button v-bind="$attrs" /></div>',
              components: {
                'ThemeButton': {
                  props: ['theme'],
                  template: '<button>{{theme}}</button>',
                }
              }
            }
          }
        }
      }
    })
  </script>
复制代码

React

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

import React, { Component } from 'react';
const ThemeContext = React.createContext('light');

class App extends Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar (props) {
  return (
    <div>
      <ThemeButton />
    </div>
  )
}

class ThemeButton extends Component {
  static contextType = ThemeContext
  render() {
    return (
      <button>{this.context}</button>
    );
  }
}

export default App;
复制代码