Rumah > Artikel > hujung hadapan web > 浅析Vue中的插件和组件,聊聊它们的区别!
组件是什么?插件是什么?下面本篇文章带大家了解一下Vue中的插件和组件,聊聊插件和组件的区别,希望对大家有所帮助!
回顾以前对组件的定义:
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue
中每一个.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('componentA',{ template: '#testComponent' 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
的功能的增强或补充
Atas ialah kandungan terperinci 浅析Vue中的插件和组件,聊聊它们的区别!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!