溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Vue組件的使用方法是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
組件的介紹
組件系統是將一個大型的界面切分成一個一個更小的可控單元。
組件是可復用的，可維護的。
組件具有強大的封裝性，易于使用。
大型應用中，組件與組件之間交互是可以解耦操作的。
Vue組件的使用
全局組件的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<script>
//全局組建的定義
Vue.component("my-header", {
template: '<h2>全局組件</h2>'
});
var app = new Vue({
el: '#app',
});
</script>
</body>
</html>局部組件的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<script>
//局部組件定義
var app = new Vue({
el: '#app',
components: {
'my-header': {
template: '<h2>局部組件</h2>'
}
}
});
</script>
</body>
</html>組件數據的特點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
<my-header></my-header>
<br>
<my-header1></my-header1>
<my-header1></my-header1>
</div>
<script>
//組件數據之間不共享，Vue實例中的數據也不能共享給組件,并且組件中的data只能使用函數
//組件的數據data使用函數的特點是每次點擊或操作組件函數會重新執行，這樣就不會影響其它組件，通過下面兩個例子可以看出
var data = {
count: 0
};
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue!!!"
},
components: {
'my-header': {
template: '<h2 v-on:click="changeCount">{{count}}</h2>',
data: function() {
return data;
},
methods: {
changeCount: function() {
this.count++;
}
}
},
'my-header1': {
template: '<div v-on:click="changeCount1">{{count}}</div>',
data: function() {
return {
count: 0
};
},
methods: {
changeCount1: function() {
this.count++;
}
}
}
}
});
</script>
</body>
</html>Vue實例與組件之間的關系
Vue組件其實是一個可擴展的Vue實例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
//Vue組件其實是一個可擴展的Vue實例，Vue實例也可以看成是一個組件
// var app = new Vue({
// el: '#app',
// template: '<h2>app應用</h2>'
// });
//使用繼承實現Vue組件
var myComponent = Vue.extend({
data: function() {
return {
message: "Hello Vue@@@"
}
}
});
var vm = new myComponent({
el: '#app'
});
</script>
</body>
</html>Vue組件的模版方式
\
`
<template id="xxx"></template>
<script type="text/x-template"></script>
.vue 單文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
<my-header-1></my-header-1>
<my-header-2></my-header-2>
<my-header-3></my-header-3>
</div>
<template id="temp">
<div>
<p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</p>
</div>
</template>
<script type="text/x-template" id="temp1">
<div>
<p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</p>
</div>
</script>
<script>
//Vue模版添加方式
var app = new Vue({
el: '#app',
components: {
'my-header': {
template: '<div>\
<p>\
<ul>\
<li>1</li>\
<li>2</li>\
<li>3</li>\
</ul>\
</p>\
</div>',
data: function() {
return {
message: "第一項"
}
}
},
'my-header-1': {
template: `<div>
<p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</p>
</div>`,
},
'my-header-2': {
template: '#temp'
},
'my-header-3': {
template: '#temp1'
}
}
});
</script>
</body>
</html>Vue父組件向子組件通信（props）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 數據在組件中 -->
<my-header></my-header>
<!-- 父組件向子組件傳遞數據 -->
<my-header-1 :list="temp_2_list"></my-header-1>
<!-- 父組件向子組件傳遞數據不給值 -->
<my-header-1></my-header-1>
</div>
<!-- 數據在組件中的模版 -->
<template id="temp-1">
<div>
<h2>{{message}}</h2>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</template>
<!-- 父組件向子組件傳遞數據的模版 -->
<template id="temp-2">
<div>
<h2>{{message}}</h2>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<my-nav :itemlist = "list"></my-nav>
</div>
</template>
<!-- 子組件向子組件傳遞數據的模版 -->
<template id="temp-3">
<div>
<h2>{{message}}</h2>
<ul>
<li v-for="item in itemlist">{{item}}</li>
</ul>
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//數據在自己組件中的實例
'my-header': {
template: '#temp-1',
data: function() {
return {
list: ["1", "2", "3"],
message: "組件中的數據"
};
}
},
//父組件向子組件傳遞數據
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父組件向子組件傳遞數據"
};
},
//屬性的驗證與默認值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
//子組件的子組件
components: {
'my-nav': {
template: '#temp-3',
data: function() {
return {
message: "子組件中的子組件"
};
},
props: ["itemlist"]
}
}
}
}
});
</script>
</body>
</html>子組件向父組件通信（EmitEvents）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header-1 :list="temp_2_list"></my-header-1>
</div>
<!-- 父組件向子組件傳遞數據的模版 -->
<template id="temp-2">
<div>
<h2>{{message}}</h2>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<my-nav :itemlist = "list" v-on:change-events="getChildContent"></my-nav>
</div>
</template>
<!-- 子組件向子組件傳遞數據的模版 -->
<template id="temp-3">
<div>
<h2>{{message}}</h2>
<ul>
<li v-for="item in itemlist" v-on:click="getContent">{{item}}</li>
</ul>
</div>
</template>
<script>
//子組件向父組件傳遞數據，是發布訂閱模式
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//父組件向子組件傳遞數據
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父組件向子組件傳遞數據"
};
},
//屬性的驗證與默認值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
methods: {
getChildContent: function(str) {
debugger
alert(str);
}
},
//子組件的子組件
components: {
'my-nav': {
template: '#temp-3',
data: function() {
return {
message: "子組件中的子組件"
};
},
props: ["itemlist"],
methods: {
getContent: function(ev) {
// console.log(this);
// console.log(ev.target.innerHTML);
this.$emit("change-events", ev.target.innerHTML);
}
}
}
}
}
}
});
</script>
</body>
</html>Vue非父子組件的通信
空實例與自定義事件
$emit
$on
Vuex狀態管理
state
mutation
commit
空實例與自定義事件的使用(適用于小型項目)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<div id="app">
<my-header-1></my-header-1>
<my-header-2></my-header-2>
</div>
<script>
//非父子組件通信
//1.0 使用空實例進行非父子組件通信
//定義空實例
//創建步驟是：
//1、首先定義一個空實例
//2、需要給被傳遞數據的A組件使用$emit綁定自定義事件，并將A組件的數據發布給B組件
//3、使用$on訂閱A組件發布過來的數據，從而獲取數據
var busVm = new Vue();
var vm = new Vue({
el: '#app',
components: {
//組件B
'my-header-1': {
template: `<h2>{{message}}</h2>`,
data: function() {
return {
message: "非父子組件通信"
};
},
mounted() {
//使用bind（this）修正this
busVm.$on("changeEnvents", function(param) {
this.message = param;
}.bind(this));
},
},
//組件A
'my-header-2': {
template: `<ul><li @click="getContent" v-for="item in list">{{item}}</li></ul>`,
data: function() {
return {
list: ["第一項", "第二項", "第三項"]
};
},
methods: {
getContent: function(ev) {
busVm.$emit("changeEnvents", ev.target.innerHTML);
}
}
}
}
});
</script>
</body>
</html>Vuex狀態管理
Vue組件內容分發
單<slot>標簽使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<div id="app">
<my-header-1>
<h2>我是標題</h2>
</my-header-1>
<my-header-1>
<my-header-2></my-header-2>
</my-header-1>
</div>
<script>
//單插槽<slot></slot>
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div>我是頭部:<slot></slot></div>`,
},
'my-header-2': {
template: `<h2>我是標題</h2>`,
}
}
});
</script>
</body>
</html>多<slot>標簽使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<div id="app">
<my-header-1>
<button slot="left">←</button>
<button slot="right">→</button>
</my-header-1>
</div>
<script>
//多插槽的使用，則使用name屬性來指定要插入的位置
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div><slot name="left"></slot> 我是頭部:<slot name="right"></slot></div>`,
},
'my-header-2': {
template: `<h2>我是標題</h2>`,
}
}
});
</script>
</body>
</html><slot>默認值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<div id="app">
<my-header-1>
<button slot="left">←</button>
<button slot="right">→</button>
</my-header-1>
</div>
<script>
//多插槽的使用，則使用name屬性來指定要插入的位置
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div><slot name="left"></slot> 我是頭部:<slot name="right"><button slot="right">+</button></slot></div>`,
},
'my-header-2': {
template: `<h2>我是標題</h2>`,
}
}
});
</script>
</body>
</html>Vue組件開發流程
編寫基礎HTML和CSS
提取組件
數據傳輸
內容分發
添加事件和方法
Vue中DOM操作(使用$refs)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header-1 :list="temp_2_list"></my-header-1>
</div>
<!-- 父組件向子組件傳遞數據的模版,ref特性用于DOM操作，使用this.$refs.row獲取添加特性的DOM元素 -->
<template id="temp-2">
<div>
<h2>{{message}}</h2>
<ul >
<li v-for="item in list" v-on:click="updateStyle" style="color:blue" ref="row">{{item}}</li>
</ul>
</div>
</template>
<script>
//子組件向父組件傳遞數據，是發布訂閱模式
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//父組件向子組件傳遞數據
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父組件向子組件傳遞數據"
};
},
//屬性的驗證與默認值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
methods: {
updateStyle: function(ev) {
ev.target.style.color = 'red';
// this.$refs.row.style.color = 'red';
console.log(this.$refs.row);
this.$refs.row.forEach(element => {
console.log(element);
element.style.color = 'red';
});
}
}
}
}
});
</script>
</body>
</html>關于Vue組件的使用方法是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
