一、固定格式的坑
<ul><li></li></ul>因爲ES規範中ul下面只能放li，所以<ul><my-content></..></..>是會報錯的
修改：<li :is="my-content">
二、關於$ref
在普通的dom中他指向這個dom元素
在組件中它指向一個組件的引用
三、父子組件傳參
父組件向子組件傳參 :content=“xxxx” ，prop 注意點，在子組件中不能直接修改傳過來的值，而是要克隆一份副本，將穿過的值變成自己的（單向數據流） 你隨隨便便修改了父組件傳過來的參數，那如果其他參數也接受父組件傳過來的同樣的參數怎麼整？
子組件向父組件傳參 this.$emit('組件名字', 參數)
四、傳遞的參數格式
:content="xx" 有冒號，代表的是js表達式，所以 :content="123" 代表的是數字123
content="xx" 無冒號，代表的是字符串，所以 :content="123" 代表的是字符串“123”
五、給組件綁定原生事件
<my-child @click.navtive ="xxxx"> 注意要加上.navtive 不然對組件的click點擊會報錯
六、非父子組件的傳值 1.vuex 2.bus/總線/發佈訂閱模式/觀察者模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非父子組件傳值(bus/總線/發佈訂閱模式/觀察者模式)</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<son content="firstClild"></son>
<son content="secondClild"></son>
</div>
<script>
// 實現非父子組件傳參的關鍵點,Vue類下面有一個原型屬性，將這個原型屬性指向Vue的一個實例對象
Vue.prototype.bus = new Vue();
Vue.component('son',{
props:{
content:String
},
template:'<div @click="handleClick">{{content}}</div>',
methods:{
handleClick:function(){
//this.prop指vue的一個實例，每一個實例上面都有$emit方法，傳遞
this.bus.$emit('change',this.content);
}
},
//生命週期鉤子，監聽
mounted:function(){
this.bus.$on('change',function(msg){
//此處彈出來兩次是因爲兩個組件都進行了同樣事件的監聽
alert(msg);
})
}
})
var app = new Vue({
el:"#app",
});
</script>
</body>
</html>
七、動態組件
哪一個toggle特效的dom爲例子
<component :is="xxx"> xxx是組件名字，是哪個組件就加載哪一個
另外v-once將組件加載過一次變放在內存緩存中了，就不會沒切換一次加載一次了