Vue 플러그인 작성 방법

이번에는 편집자가 간단한 예제를 통해 Vue 플러그인을 작성하는 방법과 주의해야 할 사항을 알려드립니다. 필요한 독자는 따라하면서 배울 수 있습니다.

배우기 전에 왜 Vue 플러그인을 작성하고 싶은지 스스로에게 물어보세요.

프로젝트, 특히 대규모 프로젝트에서는 애니메이션 로딩, 팝업박스 등 재사용이 필요한 부분이 많습니다. 하나씩 참조하는 것이 조금 번거롭고, vue 파일에서 참조하는 컴포넌트가 너무 많으면 코드가 부풀어 오르게 나타나므로 vue 플러그인을 캡슐화할 필요가 있습니다.

요구사항에 대해 이야기한 후 구체적인 구현을 살펴보겠습니다. 현재는 두 가지 플러그인 작성 방법을 시도해 보았는데, 하나씩 소개하겠습니다.

이것은 내 프로젝트 디렉토리입니다. 일반적인 구조는 최대한 간단하고 이해하기 쉽게 설명되어 있습니다.

하나는 로딩 플러그인이고 다른 하나는 토스트 플러그인입니다. 차이점은 로딩 플러그인은 컴포넌트로 도입되는 반면, 토스트 플러그인은 마운트 지점에 직접 추가되어 호출된다는 점입니다. 메소드의 상태를 변경합니다.

현재 사용하는 것은 Jiangzi입니다:

toast 플러그인

toast 파일 아래에 두 개의 파일이 있습니다. 접미사가 vue인 파일이 플러그인의 뼈대입니다. Vue 전역에 작업 논리를 작성합니다.

toast.vue의 콘텐츠를 살펴볼 수 있습니다:

<template>
 <transition name="fade">
  <p v-show="show">
   {{message}}
  </p>

 </transition>
</template>

<script>
export default {
 data() {
 return {
  show: false,
  message: ""
 };
 }
};
</script>

<style lang="scss" scoped>
.toast {
 position: fixed;
 top: 40%;
 left: 50%;
 margin-left: -15vw;
 padding: 2vw;
 width: 30vw;
 font-size: 4vw;
 color: #fff;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.8);
 border-radius: 5vw;
 z-index: 999;
}

.fade-enter-active,
.fade-leave-active {
 transition: 0.3s ease-out;
}
.fade-enter {
 opacity: 0;
 transform: scale(1.2);
}
.fade-leave-to {
 opacity: 0;
 transform: scale(0.8);
}
</style>

주요 콘텐츠는 표시 여부를 결정하는 show와 표시 여부를 결정하는 message 두 가지뿐입니다. 표시할 콘텐츠. show和显示什么内容的message。

粗看这里，有没有发现什么问题？

这个文件中并没有props属性，也就是无论是show也好，message也好，就没有办法通过父子组件通信的方式进行修改，那他们是怎么正确处理的呢。别急，来看他的配置文件。

index.js:

import ToastComponent from './toast.vue'

const Toast = {};

// 注册Toast
Toast.install = function (Vue) {
 // 生成一个Vue的子类
 // 同时这个子类也就是组件
 const ToastConstructor = Vue.extend(ToastComponent)
 // 生成一个该子类的实例
 const instance = new ToastConstructor();

 // 将这个实例挂载在我创建的p上
 // 并将此p加入全局挂载点内部
 instance.$mount(document.createElement('p'))
 document.body.appendChild(instance.$el)
 
 // 通过Vue的原型注册一个方法
 // 让所有实例共享这个方法 
 Vue.prototype.$toast = (msg, duration = 2000) => {
  instance.message = msg;
  instance.show = true;

  setTimeout(() => {
   
   instance.show = false;
  }, duration);
 }
}

export default Toast

这里的逻辑大致可以分成这么几步：

创建一个空对象，这个对象就是日后要使用到的插件的名字。此外，这个对象中要有一个install的函数。使用vue的extend方法创建一个插件的构造函数（可以看做创建了一个vue的子类），实例化该子类，之后的所有操作都可以通过这个子类完成。之后再Vue的原型上添加一个共用的方法。

这里需要着重提的是Vue.extend()。举个例子，我们日常使用vue编写组件是这个样子的：

Vue.component('MyComponent',{
 template:&#39;<p>这是组件</p>&#39;
})

这是全局组件的注册方法，但其实这是一个语法糖，真正的运行过程是这样的：

let component = Vue.extend({
 template:&#39;<p>这是组件</p>&#39;
})

Vue.component(&#39;MyComponent&#39;,component)

Vue.extend会返回一个对象，按照大多数资料上提及的，也可以说是返回一个Vue的子类，既然是子类，就没有办法直接通过他使用Vue原型上的方法，所以需要new一个实例出来使用。

在代码里console.log(instance)

得出的是这样的结果：

可以看到$el:p.toast

也就是toast组件模板的根节点。

疑惑的是，我不知道为什么要创建一个空的p节点，并把这个实例挂载在上面。我尝试注释这段代码，但是运行会报错。

查找这个错误的原因，貌似是因为

document.body.appendChild(instance.$el)

这里面的instance.$el的问题，那好，我们console下这个看看。WTF！！！！结果居然是undefined

여기를 잠깐 살펴보니 문제가 있나요?

이 파일에는 props 속성이 없습니다. 즉, 쇼이든 메시지이든 부모-자식 컴포넌트 통신을 통해 수정할 방법이 없습니다. 그러면 어떻게 올바르게 처리합니까? 걱정하지 마세요. 구성 파일을 살펴보겠습니다.

index.js:

console.log(instance)

여기의 논리는 대략 다음 단계로 나눌 수 있습니다.

나중에 사용할 플러그인의 이름인 빈 개체를 만듭니다. 또한 이 개체에는 설치 기능이 있어야 합니다. vue의 확장 메소드를 사용하여 플러그인 생성자를 생성하고(vue의 하위 클래스를 생성하는 것으로 볼 수 있음) 하위 클래스를 인스턴스화하면 모든 후속 작업이 이 하위 클래스를 통해 완료될 수 있습니다. 그런 다음 Vue 프로토타입에 공유 메서드를 추가합니다.

여기서 언급해야 할 것은 Vue.extend()입니다. 예를 들어, 컴포넌트를 작성하기 위해 Vue를 매일 사용하는 것은 다음과 같습니다:

instance.$mount(document.createElement('p'))

이것은 전역 컴포넌트의 등록 방법이지만 실제로는 구문 설탕입니다.

instance.$mount(instance.$el)

Vue.extend 대부분의 정보에서 언급했듯이 객체는 Vue의 하위 클래스를 반환한다고 할 수도 있습니다. 하위 클래스이기 때문에 이를 통해 Vue 프로토타입의 메서드를 직접 사용할 수 있는 방법이 없으므로 새로운 인스턴스가 필요합니다. .

코드 console.log(instance)

결과는 다음과 같습니다.

토스트 구성 요소 템플릿의 루트 노드인 $el:p.toast

를 볼 수 있습니다.

헷갈리는 점은 왜 빈 p 노드를 생성하고 여기에 이 ​​인스턴스를 마운트해야 하는지 모르겠다는 것입니다. 이 코드에 주석을 달려고 했지만 실행하면 오류가 발생합니다.

이 오류의 원인을 찾아보세요.

import Vue from 'vue'
import App from './App'
// import router from './router'
import Toast from './components/taost'
Vue.use(Toast)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({

 // router,
 render: h => h(App)
}).$mount('#app')

🎜여기 instance.$el에 문제가 있기 때문입니다. 알겠습니다. 콘솔하고 살펴보겠습니다. 뭐야! ! ! ! 결과는 정의되지 않음으로 나타났습니다. 🎜🎜그럼🎜

// app.vue
<template>
 <p id="app">
 <loading duration=&#39;2s&#39; :isshow=&#39;show&#39;></loading>
 <!-- <button @click="show = !show">显示/隐藏loading</button> -->
 <button @click="toast">显示taost弹出框</button>
 </p>
</template>

<script>
export default {
 name: "app",
 data() {
 return {
  show: false
 };
 },
 methods: {
 toast() {
  this.$toast("你好");
 }
 }
};
</script>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

🎜🎜🎜🎜 이전 사진과 비교해 보세요. 무엇을 찾았나요? 예, $el이 사라졌습니다. 즉, 🎜

<template>
 <p class=&#39;wrapper&#39; v-if="isshow">
  <p class=&#39;loading&#39;>
   <img src="./loading.gif">
  </p>
 </p>
</template>

<script>
export default {
 props: {
 duration: {
  type: String,
  default: "1s" //默认1s
 },
 isshow: {
  type: Boolean,
  default: false
 }
 },
 data: function() {
 return {};
 }
};
</script>

<style lang="scss" scoped>

</style>

🎜 댓글을 단 후에는 마운트 지점이 더 이상 존재하지 않습니다. 그런 다음 이 문장을 변경하려고 했습니다. 🎜

import LoadingComponent from './loading.vue'

let Loading = {};

Loading.install = (Vue) => {
 Vue.component('loading', LoadingComponent)
}

export default Loading;

🎜$el 마술처럼 다시 돌아왔습니다... 🎜🎜이 변경 사항에 대해 당분간 아무런 문제도 발견되지 않았으며 위와 같이 실행될 수 있습니다. 그러나 어떤 경우에도 이는 후속 작업을 위해 인스턴스가 노드에 마운트되어야 함을 의미합니다. 🎜🎜그 이후의 코드는 간단합니다. Vue 프로토타입에 플러그인 상태를 변경하는 메서드를 추가하는 것뿐입니다. 그런 다음 이 개체를 내보냅니다. 🎜🎜다음 단계는 사용 방법입니다. main.js가 어떻게 작성되는지 살펴보겠습니다: 🎜

// main.js
import Vue from 'vue'
import App from './App'
// import router from './router'
import Toast from './components/taost'
import Loading from './components/loading'

Vue.use(Toast)

Vue.use(Loading)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({

 // router,
 render: h => h(App)
}).$mount('#app')

// app.vue
<template>
 <p id="app">
 <loading duration=&#39;2s&#39; :isshow=&#39;show&#39;></loading>
 <!-- <button @click="show = !show">显示/隐藏loading</button> -->
 <button @click="toast">显示taost弹出框</button>
 </p>
</template>

<script>
export default {
 name: "app",
 data() {
 return {
  show: false
 };
 },
 methods: {
 toast() {
  this.$toast("你好");
 }
 }
};
</script>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

🎜 이렇게 하면 다음과 같이 다른 vue 파일에서 직접 사용할 수 있습니다: 🎜

vue.use(toast)

🎜 메소드에 메소드를 추가하여 Vue 프로토타입에 작성된 $toast 대 toast를 제어합니다. 작동할 구성 요소. 🎜🎜이렇게 해서 토스트 컴포넌트 작성 과정이 끝났고, 처음에 gif 사진을 보면 그 효과를 보실 수 있습니다. 🎜🎜플러그인 로드🎜🎜이전 플러그인에 대한 설명이 끝난 후 이 부분은 그다지 자세히 설명하지 않겠습니다. 결국 대부분 차이점만 지적하겠습니다. 🎜rrreee🎜이것은 디스플레이 효과를 제어하기 위해 두 상위 구성 요소의 데이터를 전달하는 템플릿일 뿐입니다. 🎜🎜그런 다음 플러그인의 구성 파일을 살펴보겠습니다. 🎜

import LoadingComponent from './loading.vue'

let Loading = {};

Loading.install = (Vue) => {
 Vue.component('loading', LoadingComponent)
}

export default Loading;

这个和taoat的插件相比，简单了很多，依然是一个空对象，里面有一个install方法，然后在全局注册了一个组件。

比较

那介绍了这两种不同的插件编写方法，貌似没有什么不一样啊，真的是这样么？

来看一下完整的main.js和app.vue这两个文件：

// main.js
import Vue from 'vue'
import App from './App'
// import router from './router'
import Toast from './components/taost'
import Loading from './components/loading'

Vue.use(Toast)

Vue.use(Loading)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({

 // router,
 render: h => h(App)
}).$mount('#app')

// app.vue
<template>
 <p id="app">
 <loading duration=&#39;2s&#39; :isshow=&#39;show&#39;></loading>
 <!-- <button @click="show = !show">显示/隐藏loading</button> -->
 <button @click="toast">显示taost弹出框</button>
 </p>
</template>

<script>
export default {
 name: "app",
 data() {
 return {
  show: false
 };
 },
 methods: {
 toast() {
  this.$toast("你好");
 }
 }
};
</script>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

可以看出来，loading是显示的写在app.vue模板里的，而toast并没有作为一个组件写入，仅仅是通过一个方法控制显示。

来看一下html结构和vue工具给出的结构：

看出来了么，toast插件没有在挂载点里面，而是独立存在的，也就是说当执行

vue.use(toast)

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用dataset如何实现图片延时加载

在jquery中有关手机触屏滑动功能

在Mac中如何安装nvm（详细教程）

在微信小程序中如何实现时间功能

위 내용은 Vue 플러그인 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!