vue에서 재사용 가능한 구성 요소를 캡슐화하는 방법
- 亚连원래의
- 2018-06-02 10:28:243741검색
이제 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:'内容',
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 'vue';
import toast from './js/toast'; //引入toast函数
Vue.prototype.$toast = toast; //给Vue对象添加$toast方法
export default {
name: 'hello',
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); 저희 그룹 토스트 컴포넌트는 정상적으로 사용 가능합니다!
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
JavaScript에서 import 및 require를 사용하여 패키징 후 원리 분석 구현
위 내용은 vue에서 재사용 가능한 구성 요소를 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!