vue中組件怎么用

這篇文章主要為大家展示了“vue中組件怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中組件怎么用”這篇文章吧。

創(chuàng)新互聯(lián)是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站備案、服務(wù)器租用、國際域名空間、軟件開發(fā)、微信小程序開發(fā)等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運營推廣經(jīng)驗的科技公司，有著多年的網(wǎng)站建站經(jīng)驗，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個面向全國乃至全球的業(yè)務(wù)窗口：建站來電聯(lián)系：18980820575

前言

組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。

在vue angular react三大前端框架的大前端時代。許多人選擇了vue，在 github 上的star，vue已經(jīng)超過react的數(shù)量了。雖然star并不能代表vue更強(qiáng)，不過在發(fā)展速度上看來，vue確實很快。

在模塊化的前端時代，萬物皆組件，vue學(xué)習(xí)組件是必不可少的。

可是在大多數(shù)人熟悉了純html、jq之后，在初次接觸vue的組件時候，卻是滿臉蒙蔽。
今天咱們以最簡單的方式，帶vue小白童鞋們，步入組件的世界~

咱們今天講三種組件使用方式

• 基本組件

• 全局組件

• 構(gòu)造組件

1. 基本組件四步驟

• 寫好組件（廢話~）

• 在頁面種引用組件

• 在components中聲明組件

• 在頁面上使用

咱們以一個button子組件為例

項目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)然 你可以處理多個全局組件：

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=>{
 // 這里 使用每個組件的 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: "我是一個彈框"
 };
 }
};
</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;
}
/* 加個簡單動畫 */
@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) => {
 // 實例化組件
 const instance = new MessageConstructor({
  el: document.createElement('div'),
  // 組件參數(shù)，運用到組件內(nèi)的data
  data: options,
 });
 // 在body添加組件
 document.body.appendChild(instance.$el);
 Vue.nextTick(() => {
  instance.timer = setTimeout(() => {
   // 定時關(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)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：vue中組件怎么用
標(biāo)題網(wǎng)址：http://www.muchs.cn/article42/jdosec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、虛擬主機(jī)、網(wǎng)站維護(hù)、網(wǎng)站內(nèi)鏈、微信公眾號、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)