跨组件属性传递

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;
复制代码

转载于:https://juejin.im/post/5cce7afae51d453f146bb8d5