這種場(chǎng)景你可能需要把模態(tài)框包裝成插件。vue插件開發(fā)和組件的區(qū)別 - 水秋玄?im.mkinit.com

vue插件和組件的區(qū)別

使用插件的方式包裝組件和直接注冊(cè)全局組件其實(shí)是一樣的，都是注冊(cè)組件。不同的是，一般組件我們是作為頁(yè)面的某一塊結(jié)構(gòu)，按需引用，但是有些應(yīng)用場(chǎng)景你可能會(huì)用到也可能用不到，總之就是你不知道什么時(shí)候會(huì)用到，總不能在每個(gè)頁(yè)面都引用吧。再一個(gè)，控制組件需要傳遞props，也就是說每次引用都需要寫方法才能達(dá)到控制的目的。

所以一般組件就不適合輕提示、加載動(dòng)畫、模態(tài)框這種隨時(shí)需要的功能，所以需要把組件包裝成插件，直接添加到頁(yè)面上(一般是插入到body)，再通過在vue的原型上添加全局功能，使用自定義的方法(api)來控制組件。

vue的組件就是組件，沒有其他。但是插件不僅僅限于組件，它也可以包裝過濾器、混入、自定義指令。這就是組件和插件的區(qū)別。

插件的開發(fā)(以輕提示為例子，同時(shí)也演示過濾器、混入、自定義指令)

不存在的目錄自行創(chuàng)建

1、首先創(chuàng)建一個(gè)單文件組件(src/plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.vue)

這就是一個(gè)普通的組件

{{message}}

export default {

name:'toast',

data(){

return {

show:false,

message:''

}

}

}

.fade-enter-active, .fade-leave-active {

transition: opacity .5s;

}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

opacity: 0;

}

.toast{

position:fixed;

z-index:100;

left:50%;

top:50%;

transform: translate(-50%,-50%);

padding:1em 2em;

background-color:rgba(0,0,0,.9);

color:#FFF;

}

2、創(chuàng)建一個(gè)暴露install方法的模塊(src/plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.js)

這個(gè)插件包含了輕提示組件、混入、過濾、自定義指令這幾個(gè)基本功能，都可以全局使用。

import toast_component from './js2-vuepluginsdemo.vue'

export default {

//插件需要暴露一個(gè)install方法作為回調(diào)函數(shù)，接收Vue和配置參數(shù)

install: (Vue, options) => { //options 是use時(shí)可以傳遞的參數(shù)

console.log(options)

/*

* 定義一個(gè)全局混入，混入到所有組件中

*/

Vue.mixin({

methods: {

sayhi() { //所有組件都擁有該方法

console.log(this, 'sayhi');

}

},

mounted() { //所有組件都會(huì)輸出

this.sayhi()

}

})

/*

* toast 組件插件

*/

const component = Vue.extend(toast_component) //創(chuàng)建一個(gè)組件構(gòu)造器

const toast = new component({

name:''

data: { //可通過構(gòu)造時(shí)傳參初始化數(shù)據(jù)

'js2': '我是通過構(gòu)造器傳遞的參數(shù)'

}

}) //實(shí)例化組件

toast.$mount()//$mount 如果沒有參數(shù)，模板將被渲染為文檔之外的的元素，必須使用原生 DOM API 把它插入文檔中。

document.body.appendChild(toast.$el)//手動(dòng)插入到body

Vue.prototype.$toast = (msg, duration = 1500) => {//在Vue的原型上創(chuàng)建一個(gè)方法作為全局方法，操作的是組件中的data數(shù)據(jù)

toast.message = msg;

toast.show = true;

setTimeout(() => {

toast.show = false;

}, duration);

}

/*

* 定義一個(gè)全局指令

*/

Vue.directive('focus',{

inserted(ele){

ele.focus()

}

})

/*

* 定義一個(gè)全局過濾器

*/

Vue.filter('length',value=>{

return value.length

})

}

}

3、注冊(cè)插件

在入口文件(main.js)中導(dǎo)入并注冊(cè)插件：

import toast from './plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.js'//導(dǎo)入插件

//import toast from 'js2-vuepluginsdemo'//通過npm下載的包這樣引入

Vue.use(toast,{option:'我是通過use傳入的參數(shù)'})//注冊(cè)這個(gè)插件

4、在任何組件中都可以使用插件中的功能

在組件的mounted中調(diào)用提示：this.$toast('Welcome to Your Vue.js App',3000)

使用過濾：{{ msg | length }}

使用指令：

總結(jié)

以上是生活随笔為你收集整理的vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。