先寫乙個工具函式,建立元件例項
// 建立指定元件例項並掛載於body上
import vue from
'vue'
;export
default
function
create
(component, props))}
}).$mount()
;// 更新操作
// 1. 上面vm幫我們建立元件例項
// 2. 通過$children獲取該元件例項
console.
log(vm.$root)
;const comp = vm.$children[0]
;// 3. 追加至body
document.body.
(vm.$el)
;// 4. 清理函式
comp.
remove=(
)=>
// 5. 返回元件例項
return comp;
}
"isshow"
>
}<
/h3>
}<
/p>
<
/div>
<
/template>
export
default
, message:
, duration:},
data()
;}, methods:
,this
.duration);}
,hide()
}};<
/script>
"scss" scoped>
<
/style>
methods:);
notice.
show()
;});
}}
vue 元件的封裝
首先封裝元件的需求肯定是多個地方要用到同乙個東西，他們都有公共的地方，vue的封裝 簡單來說就是將公共引數封裝起來 然後在需要的地方引入 子元件封裝 background background align right current change currentchange size change ...
vue 封裝元件
一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...
vue彈窗訊息元件練習2
本來打算寫乙個那種提示完了自動消失的彈窗的，但是沒有想好淡入淡出的效果。所以暫時算是半成品。練習 如下 lang en charset utf 8 ys alert componenttitle input ys alert icon content 成功的樣式 success 失敗的樣式 erro...