vue組件的基本使用,以及組件之間的基本傳值方式


組件(頁面上的每一個部分都是組件)
1.三部分:結構(template),樣式(style),邏輯(script)
2.組件的作用:復用
3.模塊包含組件
4.組件創建:
    1.全局組件:Vue.component();
    2.局部組件:components();
        參數1:組件的名稱
        參數2:組件的配置項
*組件的配置項:
    1.new Vue這個里面有什么參數,那么組件的配置項中就有什么參數,包含生命周期
    2.組件內部多了一個屬性template
    3.組件內部的data不在是一個對象,而是一個函數
組件的使用:
    1.直接將組件的名稱當做標簽使用即可
    2.組件名稱首字母必須大寫
5.腳手架的使用
    1.安裝:
        3.0 cnpm install @vue/cli -g
        2.9.3 cnpm install vue-cli -g
    2.創建項目
        3.0 vue create <項目名稱>
        2.9.3 vue init webpack <項目名稱>
6..組件間的傳值(組件之間的通訊)
    一.父子通信
    1.父傳子
       傳遞:當子組件在父組件當做標簽使用的時候,通過給子組件綁定一個自定義屬性,值為需要傳遞的數據
        接收:在子組件內部通過props進行接收
            接收方式有兩種:
                1.一種是數組接收,2.另一種是對象接收
                一般情況下我們都使用對象進行接收,因為對象接收可以校驗數據的類型
eg:
props:["val"];
props:{
    val:String//當這個是number的時候,就會有警告
}
    2.子傳父
        (1)傳遞:當子組件給父組件傳遞數據的時候,通過調用父組件給子組件綁定的自定義事件,然后將傳遞過去
        接收:父組件通過自定義事件的函數來接收子組件傳遞過來的數據(注意這個自定義方法的函數在綁定的時候不需要加())
        (2)作用域插槽
    二、 非父子
        1.在vue的原型身上添加一個公共的vue實例,組件之間調用這個公共的實例的$on and $emit來傳遞數據,傳遞的一方調用$emit,接收的一方用$on;
        2.手動封裝$on $emit $off(原理應用了觀察者模式)
        3.EventBus
        4.vuex
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM