react-vue在 React 中運(yùn)行 Vue

React-Vue旨在連接 React 和 Vue，幫助您在 React 中運(yùn)行 Vue。

用途：

• 使用Vue 的 Reactivity 系統(tǒng)來觀察React組件

• 使用 react-vue-loader 以在React應(yīng)用中運(yùn)行Vue組件

Reactivity 系統(tǒng)

感謝 Vue 層次分明的簡潔設(shè)計(jì)，我們可以很容易的將 reactivity 系統(tǒng)導(dǎo)出（9KB壓縮包），并在其上驅(qū)動(dòng) React 組件

npm install --save react-vue

import React, { Component } from 'react';import Vue, { observer } from 'react-vue';const store = new Vue({  data () {    return {
      count: 0
    }
  },
  methods: {    increase () {      this.count ++;
    }
  }
});

@observerexport default class Demo extends Component {  render () {    return <h1 onClick={store.increase}>{store.count}</h1>;
  }
}

文檔

Vue組件

引入react-vue-loader 可以將Vue組件編譯成一個(gè)React組件。正如您所想的那樣，您編寫的Vue組件可以在React組件中運(yùn)行，React組件也可以在Vue組件中運(yùn)行。

npm install --save react-vue react-vue-helper
npm install --save-dev react-vue-loader

// One.jsimport React, { Component } from 'react';import Two from './Two';export default class One extends Component {  render() {    return <Two>Hello Vue</Two>;
  }
}

<!-- Two.vue --><template>
  <div @click="count++">
    <three>{{count}}</three>
    <slot></slot>
  </div>
</template>

<script>  import Three from './Three'  export default {    components: { Three },    data () {      return {        count: 0      }    }  }</script>

// Three.jsimport React, { Component } from 'react';export default class Three extends Component {  render () {    return <span>{this.props.children}</span>
  }
}

文檔