vue에서 재사용 가능한 구성 요소를 캡슐화하는 방법

이제 Vue에서 재사용 가능한 구성 요소를 캡슐화하는 방법에 대한 기사를 공유하겠습니다. 이 기사는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

이번에 캡슐화한 컴포넌트는 toast 컴포넌트를 예로 들었습니다

기존에는 모바일 UI 플러그인을 사용할 때 $.toast('content to bedisplay') 같은 코드를 사용했습니다. 이 텍스트를 페이지에 표시하고 일정 시간이 지나면 사라지는 데 사용되었습니다.

이제 토스트 구성 요소를 직접 캡슐화하려고 합니다.

준비 작업: vue-cli 스캐폴딩 프로젝트

먼저 관련된 파일 디렉터리의 스크린샷을 살펴보세요:

이 패키지에 관련된 주요 파일은 Toast.vue toast.js Hello.vue, 주요 아이디어는 다음과 같습니다:

① Toast.vue는 우리가 사용하려는 토스트 구성 요소입니다.

② Vue.extend()를 사용하여 toast.js에서 구성 요소 생성자를 확장한 다음 구성 요소 생성자를 인스턴스화합니다. 재사용 가능한 구성요소를 생성합니다.

마지막으로 toast.js에서 myToast 함수를 내보냅니다. myToast 함수의 논리는 코드에 설명되어 있습니다.

③ Hello.vue에서 함수를 호출하여 구성 요소를 표시합니다.

Toast.vue 코드:

<template>
	<p class="toast" v-if="isShow">
		<p class="toast-p">{{ text }}</p>
	</p>
</template>
<script>
export default{
	data(){
		return {
			text:&#39;内容&#39;,
			isShow:true,
			duration:1500
		}
	}
}
</script>
<style>
*{
	margin: 0;
	padding: 0;
}
.toast{
 	position: fixed;
 	left: 50%;
 transform: translate(-50%, 0);
 margin-top: 5rem;
 background: #000000;
 line-height: 0.7rem;
	color: #FFFFFF;
	padding: 0 0.2rem;
	border-radius: 0.2rem;
}
</style>

Toast.js 코드:

import Vue from 'vue'; 
import Toast from '@/components/Toast'; //引入组件 
let ToastConstructor = Vue.extend(Toast) // 返回一个“扩展实例构造器” 
 
let myToast = ()=>{ 
 let toastDom = new ToastConstructor({ 
 el:document.createElement('p') //将toast组件挂载到新创建的p上 
 }) 
 document.body.appendChild( toastDom.$el ) //把toast组件的dom添加到body里 
} 
export default myToast;

Hello.vue 코드:

<template>
 <p class="hello">
 <button @click="showToast">按钮</button>
 </p>
</template>
<script>
import Vue from &#39;vue&#39;;
import toast from &#39;./js/toast&#39;; //引入toast函数
Vue.prototype.$toast = toast;  //给Vue对象添加$toast方法
export default {
 name: &#39;hello&#39;,
 data () {
 return {
 
 }
 },
 methods:{
 	showToast(){
 		this.$toast();  //现在就可以调用了
 	}
 }
}
</script>

위의 단계를 거쳐도 실제 토스트 효과에는 여전히 차이가 있습니다. 그 효과는 일정 시간이 지나면 표시된 콘텐츠를 사라지게 하는 것입니다. 그런 다음 toast.js에서 이를 수정하고 myToast 함수를 다시 작성하고 이에 대한 두 개의 수신 매개변수를 설정해야 합니다. 하나는 표시된 콘텐츠이고, 다른 하나는 표시되는 콘텐츠입니다. 다른 하나는 표시된 시간입니다.

toast.js의 수정된 코드는 다음과 같습니다.

import Vue from 'vue'; 
import Toast from '@/components/Toast'; //引入组件 
let ToastConstructor = Vue.extend(Toast) // 返回一个“扩展实例构造器” 
 
let myToast = (text,duration)=>{ 
 let toastDom = new ToastConstructor({ 
 el:document.createElement('p') //将toast组件挂载到新创建的p上 
 }) 
 document.body.appendChild( toastDom.$el ) //把toast组件的dom添加到body里 
 
 toastDom.text = text; 
 toastDom.duration = duration; 
 
 // 在指定 duration 之后让 toast消失 
 setTimeout(()=>{ 
 toastDom.isShow = false; 
 }, toastDom.duration); 
} 
export default myToast;

그런 다음 Hello.vue에서 호출하면 다음과 같아야 합니다. this.$toast('new content', 2000); 저희 그룹 토스트 컴포넌트는 정상적으로 사용 가능합니다!

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue에서 v-for의 데이터 그룹화 예

vue에서 v-for를 사용하여 2차원 배열 탐색

JavaScript에서 import 및 require를 사용하여 패키징 후 원리 분석 구현

위 내용은 vue에서 재사용 가능한 구성 요소를 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!