[TOC] Vue組件化開發 組件化開發： 1、組件化開髮指的是將複雜的業務拆分為一個有一個的組件 2、組件化開發的組件一般來說要靈活 3、組件化開發涉及到了Vue的js組件封裝，需要掌握Vue基礎、Vue實例方法與屬性、Vue.extend、Vue插件等知識 Vue實例方法與屬性 vm.$moun ...
目錄
Vue組件化開發
組件化開發：
1、組件化開髮指的是將複雜的業務拆分為一個有一個的組件
2、組件化開發的組件一般來說要靈活
3、組件化開發涉及到了Vue的js組件封裝，需要掌握Vue基礎、Vue實例方法與屬性、Vue.extend、Vue插件等知識
Vue實例方法與屬性
vm.$mount(el)
會將當前的組件掛載el元素上，該操作會替換當前的元素
若$mount中接收的el為空，則會掛載到當前的vue實例以外的地方
當vm對象中存在el時，會掛載到el上
vm.$el
返回當前掛載的元素
Vue.extend與Vue.Component
1、Vue.Component
定義了一個在Vue的掛載點下的一個全局組件
2、Vue.extend
定義了一個未掛載的組件類
可以接收一個組件作為當前組件類的模板
使用關鍵字new實例組件，可以接收參數，這個組件需要手動掛載
3、插件
Vue.use(Plugin, options)
Plugin：若為對象時，會查找並執行對象下的install方法，若為函數，會直接執行
options：傳遞到insntall函數中的參數
install函數的第一個參數是Vue，第二個參數為options
全局指定、組件、方法
import MyPlugin from ""
MyPlugin.install=(Vue, options)=>{
// 添加全局組件
Vue.component(MyPlugin.name, MyPlugin)
// 掛載原型方法
var Plugin = Vue.extend(MyPlugin)
Vue.prototype.doPlugin = function(){
var plugin = new Plugin({})
document.body.appendChild(plugin.$mount().$el)
}
// 添加全局方法或屬性
Vue.myGlobalMethod = function () {
// code
}
Vue.myGlobalProperty = 'property'
// 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// code
}
// code
})
// 註入組件選項
Vue.mixin({
created: function () {
// code
} ...
})
}
export default MyPlugin實例：Popup插件的封裝
編寫：
src/components/Popup/Popup.vue
<template>
<div class='popup-container' v-if="status">
<div class="popup-content">
<div class="popup-title">{{title}}</div>
<div class="popup-msg">{{msg}}</div>
<a class="popup-btn" href="javascript: void(0)" @click="hidePopup">x</a>
</div>
</div>
</template>
<script>
export default {
name: 'popup'
}
</script>
<style lang="scss">
div.popup-container{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(33, 33, 33, .5);
box-sizing: content-box;
div.popup-content{
position: absolute;
top: 50%;
left: 50%;
margin: -150px -300px;
background: #fff;
width: 600px;
height: 300px;
}
div.popup-title{
width: 590px;
height: 20px;
padding: 5px;
line-height: 20px;
text-align: center;
background: #3498db;
}
div.popup-msg{
width: 588px;
height: 239px;
text-align: center;
border: 1px solid #999;
border-top: none;
padding: 15px 5px;
}
a.popup-btn{
position: absolute;
top: 5px;
right: 5px;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
color: #666;
background: #f00;
}
}
</style>src/components/Popup/index.js
import Popup from './Popup.vue'
const defaultData = {
status: false,
title: 'Popup',
msg: 'Message'
}
Popup.install = (Vue) => {
let PopupCom = Vue.extend(Popup)
console.log('PopupCom', PopupCom)
Vue.prototype.$popup = function(params) {
let popup = new PopupCom({
el: document.createElement('div'),
data() {
for(let item in params){
defaultData[item] = params[item]
}
return defaultData
},
methods: {
hidePopup() {
this.status = false;
},
},
})
console.log('popup', popup);
console.log('popup.$mount()', popup.$mount());
document.body.appendChild(popup.$mount().$el)
}
}
export default Popup使用：
src/main.js
import Vue from 'vue'
import App from './App.vue'
//引用並使用插件
import Popup from './components/Popup'
Vue.use(Popup)
new Vue({
render: h => h(App),
}).$mount('#app')src/main.js
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<button @click="doit">do</button>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
//調用方法進行彈窗
doit() {
this.$popup({
status: true
})
}
},
}
</script>
<style lang="scss">
#app {
text-align: center;
}
</style>
