總結Vue第二天：自定義子元件、父子元件通訊、插槽
一、元件：
元件目錄
1、註冊元件（全域性元件、區域性元件和小demo）
2、元件資料存放
3、父子元件通訊（父級向子級傳遞資料、子級向父級傳遞資料）
4、父子元件儲存資料的訪問：
5、 插槽slot
1、註冊元件（全域性元件、區域性元件和demo、template模組）：
（1）註冊元件的基本步驟：
① 建立元件構造器物件 Vue.extend( ); 方法【可以省略】
② 註冊元件 Vue.component({元件的標籤名：元件構造器物件} );
③ 使用元件，在Vue例項的作用域範圍內使用
（2）全域性元件demo：
<div id="app">
<runoob></runoob>
</div>
<script>
// 註冊
Vue.component('runoob', {
template: '<h1>自定義元件!</h1>'
})
// 建立根例項
new Vue({
el: '#app'
})
</script>
（3）區域性元件demo：
<div id="app">
<runoob></runoob>
</div>
<script>
var Child = {
template: '<h1>自定義元件!</h1>'
}
// 建立根例項
new Vue({
el: '#app',
components: {
// <runoob> 將只在父模板可用
'runoob': Child
}
})
</script>
（4）template模組的簡化（模板的分離寫法）：即將其內容封裝到 template 標籤裡。
<!-- 使用元件 -->
<my-cpn></my-cpn>
<!-- 模板 -->
<template id="cpn">
<div>
<h1>nihao</h1>
</div>
</template>
let app = new Vue({
el: '#app',
components: {
'my-cpn': {template: `#cpn`}
}
});
2、元件資料存放：
（1）元件物件也有一個data屬性
（2）☆這個data屬性必須是一個函式，且函式返回一個物件，物件內部儲存著資料
3、父子元件通訊（父級向子級傳遞資料、子級向父級傳遞資料）
（1）父級向子級傳遞資料【Prop】：
● Prop：子元件在自身標籤上，使用自定義的屬性來接收外界（也可以是父元件）的資料，然後將資料接收到prop中。【接收父元件的資料—動態Prop，需要v-bind繫結屬性，資料可以從vue例項中獲取】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html暫時不支援駝峰寫法</title> </head> <body> <div id="app"> <!-- 子元件要或者外界（例如也可以是父元件）的資料，它是需要在自身標籤上，使用props中自定義的屬性來接收， 若是想接收的資料來自父元件【Vue例項】------通過繫結屬性（資料可以從vue例項中獲取） --> <!--靜態的prop--> <cpn c-info="info"></cpn><br/> <!--動態prop--> <cpn :c-info="info"></cpn> </div> <template id="cpn"> <div> <h1>cpn的內容</h1> <ul> <li v-for="item in cInfo">{{item}}</li> </ul> </div> </template> </body> <script type="text/javascript" src="./js/vue.min.js"></script> <script> const cpn = { template: `#cpn`, props:{ cInfo: { type: Object, default(){ return {} } } }, } let app = new Vue({ el: '#app', data: { message:'動態繫結屬性v-bind', abc: { id: '1', name: '父類的info中的name', age: '1' }, info: { id: '1', name: '父類的info中的name', age: '15' } }, components: { cpn } }); </script> </body> </html>
ps：Prop 驗證（元件可以為 props 指定驗證要求）：
Vue.component('my-component', {
props: {
// 基礎的型別檢查 (`null` 和 `undefined` 會通過任何型別驗證)
propA: Number,
// 多個可能的型別
propB: [String, Number],
// 必填的字串
propC: {
type: String,
required: true
},
// 帶有預設值的數字
propD: {
type: Number,
default: 100
},
// 帶有預設值的物件
propE: {
type: Object,
// 物件或陣列預設值必須從一個工廠函式獲取
default: function () {
return { message: 'hello' }
}
},
// 自定義驗證函式
propF: {
validator: function (value) {
// 這個值必須匹配下列字串中的一個
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
（2）子級向父級傳遞資料【emit】：
● 子元件通過$emit(‘自定義事件名’, 資料變數)向父元件傳送訊息，在子元件進行自定義的事件進行監聽【監聽呼叫的函式可以直接通過一個自定義的引數接收到資料變數】
<!-- 父元件 -->
<div id="app">
<!-- 子元件上監聽到自定義的事件的同時，也監聽到傳送的資料num，事件指向的函式，通過自定義一個引數value可以直接拿到資料num -->
<cpn :c-info="info" @item-click="itemClick"></cpn>
</div>
<!-- 子元件的模板 -->
<template id="cpn">
<div>
<h1>子元件的模板</h1>
<button v-for="item in cInfo" @click="btnClick(item)">{{item}}</button>
</div>
</template>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
const cpn = {
template: `#cpn`,
data(){
return{
num: 99
}
},
props:{
cInfo: {
type: Object,
default(){
return {}
}
}
},
methods: {
btnClick(item){
console.log('子元件接收到父元件傳遞的資料' + item);
//$emit的第一個引數是自定義的事件名稱和傳送資料num
this.$emit('item-click', this.num);
}
}
}
let app = new Vue({
el: '#app',
data: {
info: {
id: '1',
name: 'yile',
age: '15'
}
},
methods: {
itemClick(value){
console.log('父元件監聽到子元件發出的事件和接收到子元件的資料' + value);
}
},
components: {
cpn
}
});
</script>
4、Vue父子元件儲存資料的訪問：
（1）父元件訪問子元件data中儲存的資料：使用$children或 $refs
（注意：this.$children得到的是一個陣列，包含所有子元件物件。）
（2）$refs的使用：
■ $refs和ref指令通常是一起使用的
■ 首先，我們通過ref給某一個子元件繫結一個特定的ID
■ 其次，通過this.$refs.ID就可以訪問到該元件了
（3）子元件訪問父元件：使用$parent
二、插槽slot
1、編譯作用域：
父元件模板的所有東西（例如變數）都會在父級作用域內編譯；子元件模板的所有東西都會在子級作用域內編譯。
2、slot基本使用：
3、具名插槽slot：