react組件集成到vue框架(Vuera的使用)

最近項目中有須要把react組件集成到vue框架中,本身研究了一下,最終實現了。有人會比較好奇爲何要這麼作,主要是由於項目工期比較趕,若是本身開發這個功能最少須要半年的時間,因此找了三方組件集成進來,最後調研的組件中最符合業務需求的組件是使用react寫的。vue

首先是調研了一下網上的解決方案,最後定下來使用Vuera三方插件來集成react,直接上代碼:react

 

 1 <template>
 2 <div id="root">
 3   <component :is="videoPlayer" ></component>
 4 </div>
 5 </template>
 6 <script>
 7 import { ReactInVue } from 'vuera';
 8 import AnnotationPageContainer from './cvat-ui/containers/annotation-page/annotation-page';//react組件所在的開始頁面
 9 
10 export default {
11     components: { player: ReactInVue(AnnotationPageContainer)},
12     data () {
13         return{
14           videoPlayer: "player",
15         }
16     },
17 }18 <script>
相關文章
相關標籤/搜索