Vue의 플러그인과 컴포넌트를 간략하게 분석하고 차이점에 대해 이야기해보겠습니다!

컴포넌트란 무엇인가요? 플러그인이란 무엇입니까? 다음 기사에서는 Vue의 플러그인과 구성 요소를 이해하고 플러그인과 구성 요소의 차이점에 대해 설명하겠습니다. 모든 사람에게 도움이 되기를 바랍니다.

1. 컴포넌트란 무엇인가요?

컴포넌트의 이전 정의를 상기해 보세요.

컴포넌트는 다양한 그래픽 및 비그래픽 로직을 통합된 개념(컴포넌트)으로 추상화하는 개발 모델입니다. Vue의 >.vue 파일은 컴포넌트로 간주될 수 있습니다. (학습 영상 공유: vue video tutorialVue中每一个.vue文件都可以视为一个组件。（学习视频分享：vue视频教程）

组件的优势

• 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
• 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
• 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

二、插件是什么

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

• 添加全局方法或者属性。如: vue-custom-element
• 添加全局资源：指令/过滤器/过渡等。如 vue-touch
• 通过全局混入来添加一些组件选项。如vue-router
• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router

三、两者的区别

两者的区别主要表现在以下几个方面：

• 编写形式
• 注册形式
• 使用场景

编写形式

编写组件

编写一个组件，可以有很多方式，我们最常见的就是vue单文件的这种格式，每一个.vue文件我们都可以看成是一个组件

vue文件标准格式

<template>
</template>
<script>
export default{ 
    ...
}
</script>
<style>
</style>

我们还可以通过template属性来编写一个组件，如果组件内容多，我们可以在外部定义template组件内容，如果组件内容并不多，我们可直接写在template属性上

<template id="testComponent">     // 组件显示的内容
    <div>component!</div>   
</template>

Vue.component(&#39;componentA&#39;,{ 
    template: &#39;#testComponent&#39;  
    template: `<div>component</div>`  // 组件内容少可以通过这种形式
})

编写插件

vue插件的实现应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

注册形式

组件注册

vue组件注册主要分为全局注册与局部注册

全局注册通过Vue.component方法，第一个参数为组件的名称，第二个参数为传入的配置项

Vue.component('my-component-name', { /* ... */ })

1

局部注册只需在用到的地方通过components属性注册一个组件

const component1 = {...} // 定义一个组件

export default {
	components:{
		component1   // 局部注册
	}
}

插件注册

插件的注册通过Vue.use()的方式进行注册（安装），第一个参数为插件的名字，第二个参数是可选择的配置项

Vue.use(插件名字,{ /* ... */} )

注意的是：

注册插件的时候，需要在调用 new Vue() 启动应用之前完成

Vue.use会自动阻止多次注册相同插件，只会注册一次

使用场景

具体的其实在插件是什么章节已经表述了，这里在总结一下

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue

插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身

简单来说，插件就是指对Vue)

구성요소 장점

• 인터페이스를 그대로 유지하면서 다양한 구성 요소를 교체하여 요구 사항을 신속하게 완료할 수 있습니다. 예를 들어 입력 상자를 달력, 시간, 범위 및 기타 구성 요소로 교체할 수 있습니다. 구현
• 전체 시스템이 구성 요소로 구성되어 있기 때문에 문제가 발생하면 문제 해결 방법을 사용하여 구성 요소를 직접 제거하거나 문제를 빠르게 찾을 수 있습니다. 오류를 보고한 구성 요소를 기반으로 빠르게 포지셔닝할 수 있는 이유는 각 구성 요소의 결합도가 낮고 단일 책임을 갖고 있어 전체 시스템을 분석하는 것보다 논리가 간단하기 때문입니다.
• 유지보수성이 향상됩니다. 구성 요소는 단일 책임을 가지며 시스템에 있는 구성 요소는 재사용되므로 코드를 최적화하면 시스템의 전반적인 업그레이드를 달성할 수 있습니다.

2 플러그인은 일반적으로 Vue에 사용되어 전역 기능을 추가합니다. 플러그인의 기능 범위에는 엄격한 제한이 없습니다. 일반적으로 다음과 같은 유형이 있습니다.

• 전역 메서드 또는 속성을 추가합니다. 예: vue-custom-element
• 전역 리소스 추가: 지침/필터/전환 등 예를 들어 vue-touch
• 글로벌 믹싱을 통해 일부 구성요소 옵션을 추가합니다. 예를 들어, vue-router
• 는 Vue.prototype에 추가하여 Vue 인스턴스 메서드를 추가합니다.
• 자체 API를 제공하고 위에 언급된 기능 중 하나 이상을 제공하는 라이브러리입니다. vue-router

3. 둘의 차이점은

🎜🎜둘의 차이점은 주로 다음과 같습니다. 다음 측면에 반영됩니다. 측면: 🎜

• 작성 양식
• 등록 양식
• 사용 시나리오

🎜양식 작성🎜

🎜컴포넌트 작성🎜

🎜컴포넌트를 작성하는 방법에는 여러 가지가 있는데, 가장 일반적인 방법은 입니다. vue이 단일 파일 형식에서는 각 .vue 파일을 구성 요소로 간주할 수 있습니다🎜🎜vue 파일 표준 형식🎜rrreee🎜 template 속성을 ​​사용하여 구성 요소에 내용이 많으면 template 구성 요소 내용을 외부에서 정의할 수 있습니다. /code> 속성의 template🎜플러그인 작성🎜🎜<code>vue 플러그인은 <code>install 메소드를 노출해야 합니다. 이 메소드의 첫 번째 매개변수는 Vue 생성자이고, 두 번째 매개변수는 선택적 옵션 객체🎜rrreee

🎜등록 양식🎜 h3>🎜컴포넌트 등록🎜🎜vue컴포넌트 등록은 크게 글로벌 등록과 로컬 등록으로 나누어집니다🎜🎜Vue .comComponent를 통한 글로벌 등록 메소드에서 첫 번째 매개변수는 구성요소의 이름이고 두 번째 매개변수는 수신 구성 항목입니다. 🎜rrreee🎜1🎜🎜로컬 등록은 사용된 구성요소속성 등록만 전달하면 됩니다. 컴포넌트🎜rrreee

🎜플러그인 등록🎜

🎜플러그인 등록은 Vue.use()(설치)를 통해 등록되며, 첫 번째 매개변수는 플러그인 이름이고, 두 번째 매개변수는 선택적 구성 항목입니다🎜rrreee🎜참고:🎜🎜플러그인 등록 시 new Vue()를 호출해야 합니다. 시작하려면 적용하기 전에 완료🎜🎜Vue.use하면 동일한 플러그인의 다중 등록을 자동으로 방지하고 한 번만 등록합니다🎜

🎜 사용 시나리오🎜

🎜 구체적인 내용은 실제로 플러그인이 무엇인지에 대한 장에서 설명합니다. App. 목표 예 App.vue🎜🎜플러그인 (플러그인)은 기술 스택을 향상시키는 데 사용되는 기능 모듈입니다. 플러그인은 Vue 그 자체입니다🎜 🎜간단히 말하면 플러그인은 Vue🎜🎜의 기능을 강화하거나 보완하는 것을 말합니다. (동영상 공유 학습: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 Vue의 플러그인과 컴포넌트를 간략하게 분석하고 차이점에 대해 이야기해보겠습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!