vue第五天

vue組件：一些知識點的記錄

1. 全局組件

<aaa></aaa>
var Aaa=Vue.extend({
    template:'<h3>我是標題3</h3>'
});

Vue.component('aaa',Aaa);

*組件裏面放數據: data必須是函數的形式，函數必須返回一個對象(json)

2. 局部組件：放到某個組件內部

var vm=new Vue({
    el:'#box',
    data:{
        bSign:true
    },
    components:{ //局部組件
        aaa:Aaa
    }
});

---

另外一種編寫方式:

Vue.component('my-aaa',{
        template:'<strong>好</strong>'
    });

    var vm=new Vue({
        el:'#box',
        components:{
            'my-aaa':{
                template:'<h2>標題2</h2>'
            }
        }
    });

---

配合模板:

1. template:'<h2 @click="change">標題2->{{msg}}</h2>'

2. 單獨放到某個地方－［推薦］
    a).     <script type="x-template" id="aaa">
                <h2 @click="change">標題2->{{msg}}</h2>
            </script>
    b).    <template id="aaa"> 
                <h1>標題1</h1>
                <ul>
                    <li v-for="val in arr">
                        {{val}}
                    </li>
                </ul>
            </template>

---

動態組件:

<component :is="組件名稱"></component>

---

vue-devtools -> 調試工具

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

---

vue默認狀況下，子組件也無法訪問父組件數據

---

組件數據傳遞: √

1. 子組件就想獲取父組件data

在調用子組件：
        <bbb :m="數據"></bbb>

子組件以內:
        props:['m','myMsg']

        props:{
            'm':String,
            'myMsg':Number
        }

2. 父級獲取子級數據

*子組件把本身的數據，發送到父級

vm.$emit(事件名,數據);

v-on:    @

---

vm.$dispatch(事件名,數據)     子級向父級發送數據
vm.$broadcast(事件名,數據)    父級向子級廣播數據
配合: event:{}

在vue2.0裏面已經，報廢了

---

slot:

位置、槽口 做用: 佔個位置

相似ng裏面 transclude  （指令）