[Vue.js] 組件筆記

記錄一下學習Vue Compoment的筆記

核心ViewModel類

1. 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
2. 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
3. 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。
4. 方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
5. 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，可以理解为 Controller的逻辑被分散到了这些钩子函数中。=> 要注意1.0與2.0有些事件已經改名字
6. 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

組件註冊

全域

局部

   

Prop

父組件應該透過Prop方法來傳值給子組件

this.$parent 讓子組件可以存取父組件

this.$root 取得根實體

this.$children 父組件可以取得子組件陣列 => 可以設v-ref來替子組件設定別名確保不受組件順序影響(待查??)

事件

$on 監聽事件

$emit 在它上面觸發事件

$dispatch 向上傳遞事件  =>2.0已停用

$boardcast 廣播，向下傳遞所有後代組件  =>2.0已停用



!! 這裡與DOM 事件 向上冒泡事件不一樣，在第一次執行callback就會停止事件冒泡。除非return true (待查??)

動態指定組件: is

透過is與資料模型data切換組件

Keep-alive

避免重覆渲染可以在組件加入 keep-alive 屬性

編譯作用域

Slot

可以透過Slot機制來抽換原本組件內的預設內容

參考

http://www.lg0351.com/news/show-606.html