跨组件属性传递

Vue

$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (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;