vue 플러그인 vue.js 예제 튜토리얼 작성 방법

이 기사에서는 주로 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 표시 여부와 표시할 콘텐츠를 결정합니다. 메시지를 표시합니다. 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)

결과는 다음과 같습니다:

toast 구성 요소 템플릿의 루트 노드인 $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)

🎜🎜🎜🎜🎜🎜

通过在methods中增加一个方法控制写在Vue原型上的$toast对toast组件进行操作。

这样toast组件的编写过程就结束了，可以看到一开始gif图里的效果。

loading插件

经过上一个插件的讲解，这一部分就不会那么细致了，毕竟大多数都没有什么不同，我只指出不一样的地方。

<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;

这个和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)

相关推荐：

vue组件的3种书写形式详解

实用的vue.js项目中小技巧汇总

Vue.js划分组件的实现方法介绍

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