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

摘要： 在 vue angular react 三大前端框架的大前端時代。許多人選擇了 vue ，在 github 上的 star ， vue 已經超過 react 的數量了。雖然 star 並不能代表 vue 更強，不過在發展速度上看來， 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. 全域性元件五步驟

main.js
Vue.use

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

2. 子元件新增install方法

Button.js :

import Button from './Button.vue'

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

// 匯出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. 構造元件四步驟

vue.extend
Vue.prototype

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

效果：

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