您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vue中組件怎么用”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中組件怎么用”這篇文章吧。
前言
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素,封裝可重用的代碼。
在vue angular react三大前端框架的大前端時(shí)代。許多人選擇了vue,在 github 上的star,vue已經(jīng)超過react的數(shù)量了。雖然star并不能代表vue更強(qiáng),不過在發(fā)展速度上看來,vue確實(shí)很快。
在模塊化的前端時(shí)代,萬物皆組件,vue學(xué)習(xí)組件是必不可少的。
可是在大多數(shù)人熟悉了純html、jq之后,在初次接觸vue的組件時(shí)候,卻是滿臉蒙蔽。
今天咱們以最簡單的方式,帶vue小白童鞋們,步入組件的世界~
咱們今天講三種組件使用方式
基本組件
全局組件
構(gòu)造組件
1. 基本組件四步驟
寫好組件(廢話~)
在頁面種引用組件
在components中聲明組件
在頁面上使用
咱們以一個(gè)button子組件為例
項(xiàng)目src結(jié)構(gòu):
組件一般都放在components文件夾下:
1.寫好子組件:
<template> <button class="btn" :> <slot/> <!-- 插槽 --> </button> </template> <script> export default { // 傳入子組件的參數(shù)寫到props props: { color: { type: String, // 顏色參數(shù)類型 default: "#000" // 默認(rèn)黑色 } } } </script> <style scoped> .btn { width: 110px; height: 60px; border-radius: 10px; border: none; font-size: 15px; } </style>
2.3.4.父組件:
<template> <div id="app"> <!-- 4. 在頁面上使用 --> <Button color="red">我是插槽的值</Button> </div> </template> <script> // 2. 在頁面種引用組件 import Button from '@/components/Button.vue' export default { name: "app", // 3. 在components中聲明組件 components: { Button } }; </script>
效果:
2. 全局組件五步驟
寫好組件(還是廢話~)
子組件添加install方法
在 main.js 中引用
使用 Vue.use 方法
在頁面上使用
1.子組件還是那樣~~:
2. 子組件添加install方法
Button.js :
import ButtonComponent from './Button.vue' // 添加install方法 (插件方法) const Button = { install: function (Vue) { Vue.component("Button", ButtonComponent); } } // 導(dǎo)出Button export default Button
當(dāng)然 你可以處理多個(gè)全局組件:
import ButtonComponent1 from './Button1.vue' import ButtonComponent2 from './Button2.vue' import ButtonComponent3 from './Button3.vue' const buttonList = [ ButtonComponent1, ButtonComponent2, ButtonComponent3 ]; // 添加install方法 (插件方法) const Button = { install: function (Vue) { buttonList.forEach(button=>{ // 這里 使用每個(gè)組件的 name 屬性作為組件名 Vue.component(button.name, button); }) } } // 導(dǎo)出Button export default Button
3.4. main.js
import Vue from 'vue' import App from './App.vue' // 3 import Button from '@/components/Button.js' // 4 Vue.use(Button); new Vue({ render: h => h(App), }).$mount('#app')
5. 在頁面上使用
app.vue:
<template> <div id="app"> <!-- 5. 在頁面上使用 --> <Button color="blue">我是全局按鈕</Button> </div> </template>
效果如下:
2. 構(gòu)造組件四步驟
寫好組件(還**是廢話~)
vue.extend構(gòu)建組件
掛載 Vue.prototype
在js中使用
1.寫好子組件:
<template> <p class="Message">{{value}}</p> </template> <script> export default { data() { return { value: "我是一個(gè)彈框" }; } }; </script> <style> .Message { position: fixed; bottom: 30px; width: 200px; background-color: rgba(0, 0, 0, 0.5); color: #fff; border-radius: 10px; left: 50%; transform: translateX(-50%); line-height: 30px; text-align: center; font-size: 15px; animation: messageFade 3s 1; } /* 加個(gè)簡單動(dòng)畫 */ @keyframes messageFade { 0% { opacity: 0; -webkit-transform: translate3d(-50%, 80%, 0); transform: translate3d(-50%, 80%, 0); } 16% { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } 84% { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-50%, 80%, 0); transform: translate3d(-50%, 80%, 0); } } </style>
2. vue.extend構(gòu)建組件
Message.js :
import Vue from 'vue'; import Message from './Message.vue'; // 構(gòu)造組件 const MessageConstructor = Vue.extend(Message); // 設(shè)置刪除組件 const removeDom = (target) => { target.parentNode.removeChild(target); }; // 構(gòu)造組件添加關(guān)閉方法 MessageConstructor.prototype.close = function() { this.visible = false; removeDom(this.$el); }; const MessageDiv = (options) => { // 實(shí)例化組件 const instance = new MessageConstructor({ el: document.createElement('div'), // 組件參數(shù),運(yùn)用到組件內(nèi)的data data: options, }); // 在body添加組件 document.body.appendChild(instance.$el); Vue.nextTick(() => { instance.timer = setTimeout(() => { // 定時(shí)關(guān)閉組件 instance.close(); }, 3000); }); return instance; }; export default MessageDiv;
3. 掛載 Vue.prototype
main.js :
import Message from '@/components/Message.js' Vue.prototype.$message = Message;
4. 使用:
<template> <div id="app"> <Button color="blue" @click.native="msg">我是全局按鈕</Button> </div> </template> <script> import Button from "@/components/Button.vue"; export default { name: "app", components: { Button }, methods: { msg() { // 4. 使用構(gòu)造組件 this.$message({value:'我是構(gòu)造組件'}); } } }; </script>
效果:
以上是“vue中組件怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。