Vue組件
Vue組件介紹
Vue組件使用步驟
Vue組件的使用
組件中data 和 el 選項
使用 <script> 或 <template> 標簽
組件之間的通信
通過props向子組件傳遞資料
Vue的插槽
Vue組件
組件系統是Vue中一個重要的概念，他提供了一種抽象，可以獨立使用和可復用的小組件來構建大型應用，任意型別的應用界面都可以抽象為一個組件樹，組件是可復用的Vue實體，切帶有一個名字，組件可以擴展HTML元素，封裝可重用的HTML代碼，可以將組件看作自定義的HTML元素，
Vue組件使用步驟
1.Vue組件的使用有以下3個步驟：
1. 創建組件：呼叫Vue.extend()方法創建組件
2. 注冊組件：呼叫Vue.component()方法注冊組件
3. 使用組件：使用Vue實體頁面內自定義標簽組件
2.樣例Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--使用組件-->
<mycomp></mycomp>
</div>
<script>
//創建組件
var myComp=Vue.extend({
template:"<h2>使用Vue組件</h2>"
});
//注冊組件
Vue.component("mycomp",myComp);
//實體化組件
var vm=new Vue({
el:"#app"
})
</script>
</body>
</html>
注意：組件的命名方式有兩種：
- kebab-case(短橫線分隔命名)
- PasecalCase(首字母大寫命名)
因為直接在DOM中使用時只有 kebab-case(短橫線分隔命名)是有效的，所有一般推薦 kebab-case(短橫線分隔命名)方式命名，
Vue組件使用
組件注冊
1.全域注冊
<div id="app">
<!--使用組件-->
<mycomp></mycomp>
</div>
<script>
//創建組件
var myComp=Vue.extend({
template:"<h2>使用Vue組件</h2>"
});
//注冊組件
Vue.component("mycomp",myComp);
//實體化組件
var vm=new Vue({
el:"#app"
})
</script>
2.區域注冊
<div id="app">
<!--使用組件-->
<mycomp></mycomp>
</div>
<script>
//創建組件
var myComp=Vue.extend({
template:"<h3>使用區域Vue組件</h3>"
})
var vm=new Vue({
el:"#app",
components:{
"mycomp":myComp//區域注冊組件
}
})
</script>
3.組件語法糖
- 簡化全域注冊
<div id="app">
<!--使用組件-->
<my-comp></my-comp>
</div>
<script>
//全域注冊，my-comp是組件標簽名
Vue.component("my-comp",{
template:"<div><h3>使用Vue組件</h3></div>"
})
var vm=new Vue({
el:"#app"
})
</script>
- 簡化區域注冊
<div id="app">
<!--使用組件-->
<mycomp></mycomp>
</div>
<script>
var vm=new Vue({
el:"#app",
//區域注冊，mycomp是組件標簽名
components:{
"mycomp":{
template:"<div><h3>使用Vue組件</h3></div>"
}
}
})
</script>
組件中data 和 el 選項
一般實體化Vue的多數選項也可以用在Vue.extend)或Vue .component()中的，不過有兩個特殊選項引數除外即data和el，Vue.js 規定:在定義組件的選項時，data 和el選項必須使用函式，如果data選項指向某個物件，這意味著所有的組件實體共用一個data，使用一個函式作為data選項，讓這個函式回傳一個新物件，
1. 全域注冊組件語法
<script>
//全域注冊組件
Vue.component("組件名稱"，{
el:function(){...}，
data:function(){
return{
屬性：值
}
},
template:"組件模板"
}
}
})
</script>
2. 區域注冊組件語法
<script>
//區域注冊組件
var vm=new Vue({
el:"#app",
components:{
"組件名稱":{
el:function(){...}
data:function(){
return{
屬性：值
}
},
template:"組件模板"
}
}
})
</script>
3. 樣例Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h3>新奇水果</h3>
<fruit-list-comp></fruit-list-comp>
</div>
<template id="fruitTemplate">
<div>
<ul>
<li v-for="fruit in items">{{fruit}}</li>
</ul>
</div>
</template>
<script>
var vm=new Vue({
el:"#app",
components:{
"fruit-list-comp":{
data:function(){
return{
items:["火龍果","蘋果","西瓜","草莓"]
}
},
template:"#fruitTemplate"
}
}
})
</script>
</body>
</html>
使用 <script> 或 <template> 標簽
盡管語法糖簡化了組件注冊，但在template 選項中拼接HTML元素比較麻煩，這也導致了HTML 和JavaScript 拼接的高耦合性，所有Vue提供了兩種方式將定義在 JavaScript 中的 HTML 模板分離出來，
1.使用 script 標簽
<div id="app">
<!--使用組件-->
<my-comp></my-comp>
</div>
<script type="text/javascript" id="myComp">
<div>
<h4>使用Vue組件</h4>
</div>
</script>
<script>
//全域注冊，my-comp是組件標簽名
Vue.component("my-comp",{
template:"#myComp"
});
var vm=new Vue({
el:"#app",
components:{
"my-comp":{
template:"#myComp"
}
}
})
</script>
template選項現在不再是HTML元素，而是一個id，Vue.js根據這個id查找對應的元素，然后將這個元素內的HTML作為模板進行編譯
2. 使用 template 標簽
如果使用 <template> ，則不需要指定type屬性
<div id="app">
<!--使用組件-->
<my-comp></my-comp>
</div>
<template id="myComp">
<div>
<h4>使用Vue組件</h4>
</div>
</template>
<script>
//全域注冊，my-comp是組件標簽名
var vm=new Vue({
el:"#app",
components:{
"my-comp":{
template:"#myComp"
}
}
})
</script>
組件之間的通信
1.組件中通信6個步驟：
1. var child=Vue.extend({…});/創建子組件
2. var parent=Vue.extend({ …});//創建父組件
3. template:"<p>這是父組件<child-compont></child-compont></p>"//在父組件內以標簽的形式使用子標簽
4. components:{ “child-compont”:child//注冊子組件} //將子組件注冊到父組件，并將子組件的標簽設定為child-compont
5. Vue.component(“parent-compont”,parent) //全域注冊父組件
6. 在頁面中使用<parent-compont></parent-compont>標簽渲染父組件內容，同時子組件的內容也被渲染出來
2.樣例Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<parent-compont></parent-compont>
</div>
<script>
//創建子組件
var child=Vue.extend({
template:"<p>這是子組件</p>"
});
//創建父組件
var parent=Vue.extend({
//在父組件中使用parent-compont標簽
template:"<p>這是父組件<child-compont></child-compont></p>",
components:{
"child-compont":child//注冊子組件
}
});
//注冊父組件
Vue.component("parent-compont",parent)
var vm=new Vue({
el:"#app"
})
</script>
</body>
</html>
3.書寫錯誤的兩種方式
- 以子標簽的形式在父組件中使用
<div id="app">
<parent-compont>
<child-compont></child-compont>
</parent-compont>
</div>
- 在父組件標簽外使用子標簽
<div id="app">
<parent-compont></parent-compont>
<child-compont></child-compont>
</div>
通過props向子組件傳遞資料
組件實體的作用域是孤立的，這意味著不能并且不應該在子組件的模板內直接參考父組件的資料，可以使用props把資料傳給子組件，一個組件可以默認擁有任意數量的props（屬性），任何值都可以傳遞給任何props，在組件中，使用選項props來宣告需要從父組件中接收的資料，props的值可以是兩種：一種是字串陣列，另一種是物件
1. props的值是字串陣列
var component=Vue.extend({
props:["屬性名",...,"屬性名"],
template:"模板"
})
2. props的值是字串物件
var component=Vue.extend({
props:{
"屬性名:String",
"屬性名:Number",
"屬性名:Boolean"
},
template:"模板"
})
3.樣例Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js"></script>
<style type="text/css">
.banner{
background-color: rgb(46,110,194);
color: rgb(255,255,255);
width: 600px;
height: 50px;
line-height: 600px;
text-align: center;
padding: 20px;
margin: 0 auto;
}
span{
font-feature-settings: 0.6em;
}
</style>
</head>
<body>
<div id="app">
<!--isShowStyle 動態系結屬性-->
<!--message 靜態系結屬性-->
<banner-component v-bind:is-style="isShowStyle" message="Happy一下"></banner-component>
</div>
<!--子組件-->
<template id="childComp">
<span>{{subMessage}}</span>
</template>
<!--父組件-->
<template id="parentComp">
<div>
<!--banner：isStyle 動態系結屬性-->
<h2 :class="{ banner：isStyle}">
{{message}}
<!--sub-message（短橫線分隔方式命名） 靜態系結屬性-->
<child-component sub-message="不玩就out了"></child-component>
</h2>
</div>
</template>
<script>
var vm=new Vue({
el:"#app",
data:{
isShowStyle:true
},
components:{
"banner-component":{
props:["message","isStyle"],//props字串
template:"#parentComp",//注冊父組件
components:{
"child-component":{
props:{//props物件
subMessage:String//駝峰式命名
},
template:"#childComp",//注冊子組件
}
}
}
}
})
</script>
</body>
</html>
Vue的插槽
插槽是Vue提出來的一個概念，用于將攜帶的內容插入到指定位置，從而從而使模塊化，具有的模塊化的特質和更大重要性，插槽顯不顯示，怎樣顯示是由父組件來控制，而插槽在哪里顯示就有子組件來進行控制，
1. 插槽的使用
插槽一般在Vue的父子組件中使用，在子組件中使用標簽將不同的DOM樹組合在一起， 標簽是組件內部的占位符，用戶可以使用自己的標記來填充，通過定義一個或多個標簽，可將外部標記引入到組件的虛擬DOM中進行渲染，相當于“在此處渲染用戶的標記”，插槽有兩種使用方式:默認插槽和具名插槽，
- 默認插槽
宣告組件模板中包含一個插槽標簽，然后使用組件時將組件內容部分填充到插槽中，
<div id="app">
<p-comp>需要分發的內容</p-comp>
</div>
<template id="pComp">
<div>
<h3>使用默認插槽</h3>
<slot></slot>
</div>
</template>
<script>
var vm=new Vue({
el:"#app",
components:{
"p-comp":{
template:"#pComp"
}
}
})
</script>
- 具名插槽
默認插槽只能有一個，當需要多個插槽時，就需要具名插槽了，
<div id="app">
<p-comp>
<template slot="header">
<div>
<!--
作者：offline
時間：2021-01-26
描述：具名插槽填充內容
-->
<h3>商品管理</h3>
</template>
商品管理內容
<template slot="foots">
<h6>著作權宣告</h6>
</template>
</p-comp>
</div>
<template id="pComp">
<div>
<!--
作者：offline
時間：2021-01-26
描述：具名插槽
-->
<slot name="header"></slot>
<!--
作者：offline
時間：2021-01-26
描述：默認插槽
-->
<slot></slot>
<!--
作者：offline
時間：2021-01-26
描述：具名插槽
-->
<slot name="foots"></slot>
</div>
</template>
<script>
var vm=new Vue({
el:"#app",
components:{
"p-comp":{
template:"#pComp"
}
}
})
</script>
2. 作用域插槽的使用
插槽可以控制HTML模板的顯示與不顯示，作用域插槽( slot-scope)其實就是帶資料的插槽，原來父組件可以通過系結資料傳遞給子組件，而作用域插槽可以通過子組件系結資料傳遞給父組件，作用域插槽的使用場景:既可以復用子組件的slot,又可以使slot內容不一致，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<book-list :books="bookList">
<template slot="book" slot-scope="props">
<li>{{props.bookname}}</li>
</template>
</book-list>
</div>
<template id="bookComp">
<div>
<ul>
<slot name="book" v-for="book in books" :bookname="book.name"></slot>
</ul>
</div>
</template>
<script>
var vm=new Vue({
el:"#app",
data:{
bookList:[
{name:"《111》"},
{name:"《222》"},
{name:"《333》"}
]
},
components:{
"book-list":{
props:["books"],
template:"#bookComp"
}
}
})
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/253120.html
標籤：其他