vue 元件的三種使用方式教程

在vue angular react三大前端框架的大前端時代。許多人選擇了vue，在 github 上的star，vue已經超過react的數量了。雖然star並不能代表vue更強，不過在發展速度上看來，vue確實很快。

在模組化的前端時代，萬物皆元件，vue學習元件是必不可少的。

可是在大多數人熟悉了純html、jq之後，在初次接觸vue的元件時候，卻是滿臉矇蔽。

今天我們們以最簡單的方式，帶vue小白童鞋們，步入元件的世界~

我們們今天講三種元件使用方式

1. 基本元件
2. 全域性元件
3. 構造元件

1. 基本元件四步驟

1. 寫好元件（廢話~）
2. 在頁面種引用元件
3. 在components中宣告元件
4. 在頁面上使用

我們們以一個button子元件為例

專案src結構：

元件一般都放在components資料夾下：

1.寫好子元件：

<template>
  <button class="btn" :style="{color:color}">
    <slot/> <!-- 插槽 -->
  </button>
</template>

<script>
export default {
  // 傳入子元件的引數寫到props
  props: {
    color: {
      type: String, // 顏色引數型別
      default: "#000"  // 預設黑色
    }
  }
}
</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. 全域性元件五步驟

1. 寫好元件（還是廢話~）
2. 子元件新增install方法
3. 在 main.js 中引用
4. 使用 Vue.use 方法
5. 在頁面上使用

1.子元件還是那樣~~：

2. 子元件新增install方法

---

Button.js :

import ButtonComponent from './Button.vue'

// 新增install方法 （外掛方法）
const Button = {
  install: function (Vue) {
    Vue.component("Button", ButtonComponent);
  }
}

// 匯出Button
export default Button
複製程式碼

---

當然 你可以處理多個全域性元件：

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);
    })
  }
}

// 匯出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>
複製程式碼

效果如下：

3. 構造元件四步驟

1. 寫好元件（還**是廢話~）
2. vue.extend構建元件
3. 掛載 Vue.prototype
4. 在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構建元件

Message.js :

import Vue from 'vue';
import Message from './Message.vue';
// 構造元件
const MessageConstructor = Vue.extend(Message);
// 設定刪除元件
const removeDom = (target) => {
    target.parentNode.removeChild(target);
};
// 構造元件新增關閉方法
MessageConstructor.prototype.close = function() {
    this.visible = false;
    removeDom(this.$el);
};

const MessageDiv = (options) => {
    // 例項化元件
    const instance = new MessageConstructor({
        el: document.createElement('div'),
        // 元件引數，運用到元件內的data
        data: options,
    });
    // 在body新增元件
    document.body.appendChild(instance.$el);
    Vue.nextTick(() => {
        instance.timer = setTimeout(() => {
            // 定時關閉元件
            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. 使用構造元件
      this.$message({value:'我是構造元件'});
    }
  }
};
</script>
複製程式碼

效果：

以上就是三種元件的基本使用啦~~