지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > View.js > 본문

Vue에서 반응 구성 요소를 사용하는 방법

coldplay.xixi
풀어 주다： 2020-11-12 15:29:54
원래의
3912명이 탐색했습니다.

vue에서 반응 구성 요소를 사용하는 방법: 먼저 종속성을 설치한 다음 [main.js]를 편집하고 마지막으로 참조해야 하는 반응 구성 요소를 추가합니다. 코드는 ['./MyReactComponent'에서 MyReactComponent 가져오기]입니다.

Vue에서 반응 구성 요소를 사용하는 방법

【관련 글 추천: vue.js】

Vue 리액트 컴포넌트 사용 방법:

1 의존성 설치

npm i -S vuera
npm install --save react react-dom
로그인 후 복사

2. 

import { VuePlugin } from 'vuera'Vue.use(VuePlugin)
로그인 후 복사

3. 참조해야 할 리액트 컴포넌트를 추가합니다

import MyReactComponent from './MyReactComponent'
로그인 후 복사

이때 첫 번째 문제가 발견되었습니다.

Vue에서 반응 구성 요소를 사용하는 방법

이 문제는 jsx 파일이 없어서 발생하는 것으로 찾기 어렵지 않습니다. vue 프로젝트의 형식

해결책:

webpack.base.conf.js를 편집하고 jsx

test에 대한 지원을 추가합니다: /.(js|jsx)(?.*)?$/

현재, 두 번째 질문이 나타났습니다:

Vue에서 반응 구성 요소를 사용하는 방법

이유:

.babelrc 파일은 기본적으로 변환-vue-jsx를 도입합니다. 이 플러그인은 vue가 호출할 수 있도록 jsx를 h 함수 형식으로 이스케이프합니다.

해결책: 

npm install --save-dev babel-plugin-transform-react-jsx
로그인 후 복사
및 .babelrc 파일에서

사용

transform-react-jsx替换transform-vue-jsx

관련 무료 학습 권장 사항:

JavaScript(동영상)

위 내용은 Vue에서 반응 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
vue
원천：php.cn
이전 기사：vue.js는 ie8을 지원하나요? 다음 기사：vue.1과 vue.2의 차이점은 무엇입니까
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
템플릿의 메서드에 정의된 변수 사용 Vue(v3가 아닌 v2)를 사용하는 것은 이번이 처음이고 템플릿(메소드 내부에 정의됨) 내에서 변수를 사용하려고 노력해 왔습니다. 내 단순화된 코드: <t...
에서 2024-04-06 18:10:25
0
2
513
로그인하지 않고 Firebase를 사용하여 Vue에서 사용자 만들기 사용자 프로필을 생성하기 위한 양식을 만들었습니다. 하지만 사용자를 만들 때마다 문제가 발생합니다. 로그인 및 로그아웃된 사용자입니다. 이 문제를 해결하는 데 도...
에서 2024-04-06 14:20:12
0
1
514
Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...
에서 2024-04-06 12:43:37
0
1
473
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
vue에서 경로 소품을 설정하는 방법이 있나요? this.$router.push({name:"AdminNotifications",params:{tab:"requests"},}...
에서 2024-04-06 11:35:59
0
1
456
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿