vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...
這種場景你可能需要把模態框包裝成插件。vue插件開發和組件的區別 - 水秋玄?im.mkinit.com
vue插件和組件的區別
使用插件的方式包裝組件和直接注冊全局組件其實是一樣的，都是注冊組件。不同的是，一般組件我們是作為頁面的某一塊結構，按需引用，但是有些應用場景你可能會用到也可能用不到，總之就是你不知道什么時候會用到，總不能在每個頁面都引用吧。再一個，控制組件需要傳遞props，也就是說每次引用都需要寫方法才能達到控制的目的。
所以一般組件就不適合輕提示、加載動畫、模態框這種隨時需要的功能，所以需要把組件包裝成插件，直接添加到頁面上(一般是插入到body)，再通過在vue的原型上添加全局功能，使用自定義的方法(api)來控制組件。
vue的組件就是組件，沒有其他。但是插件不僅僅限于組件，它也可以包裝過濾器、混入、自定義指令。這就是組件和插件的區別。
插件的開發(以輕提示為例子，同時也演示過濾器、混入、自定義指令)
不存在的目錄自行創建
1、首先創建一個單文件組件(src/plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.vue)
這就是一個普通的組件
{{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、創建一個暴露install方法的模塊(src/plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.js)
這個插件包含了輕提示組件、混入、過濾、自定義指令這幾個基本功能，都可以全局使用。
import toast_component from './js2-vuepluginsdemo.vue'
export default {
//插件需要暴露一個install方法作為回調函數，接收Vue和配置參數
install: (Vue, options) => { //options 是use時可以傳遞的參數
console.log(options)
/*
* 定義一個全局混入，混入到所有組件中
*/
Vue.mixin({
methods: {
sayhi() { //所有組件都擁有該方法
console.log(this, 'sayhi');
}
},
mounted() { //所有組件都會輸出
this.sayhi()
}
})
/*
* toast 組件插件
*/
const component = Vue.extend(toast_component) //創建一個組件構造器
const toast = new component({
name:''
data: { //可通過構造時傳參初始化數據
'js2': '我是通過構造器傳遞的參數'
}
}) //實例化組件
toast.$mount()//$mount 如果沒有參數，模板將被渲染為文檔之外的的元素，必須使用原生 DOM API 把它插入文檔中。
document.body.appendChild(toast.$el)//手動插入到body
Vue.prototype.$toast = (msg, duration = 1500) => {//在Vue的原型上創建一個方法作為全局方法，操作的是組件中的data數據
toast.message = msg;
toast.show = true;
setTimeout(() => {
toast.show = false;
}, duration);
}
/*
* 定義一個全局指令
*/
Vue.directive('focus',{
inserted(ele){
ele.focus()
}
})
/*
* 定義一個全局過濾器
*/
Vue.filter('length',value=>{
return value.length
})
}
}
3、注冊插件
在入口文件(main.js)中導入并注冊插件：
import toast from './plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.js'//導入插件
//import toast from 'js2-vuepluginsdemo'//通過npm下載的包這樣引入
Vue.use(toast,{option:'我是通過use傳入的參數'})//注冊這個插件
4、在任何組件中都可以使用插件中的功能
在組件的mounted中調用提示：this.$toast('Welcome to Your Vue.js App',3000)
使用過濾：{{ msg | length }}
使用指令：
總結
以上是生活随笔為你收集整理的vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python3库下载_下载安装Pytho
- 下一篇： vue dplayer 加载失败_最新v