父子組件之間的通訊

時間 2019-11-29

標籤父子組件之間通訊简体版

原文原文鏈接

首先，組件須要向服務器請求數據，服務器將數據傳遞給外層最大的父級組件，所以父級組件須要將獲得的值傳遞給下面的小組件，所以引入了父子間通訊html

子組件不能引用父組件或者Vue實例的數據的；在開發中，每每須要將一些數據從上層傳遞給下層；vue

進行父子組件之間信息傳遞（互傳）的方式：1經過props向子組件傳遞信息2經過事件向父組件發送消息；數組

父組件--（pass props）----》子組件 -------（$emit Events）------》父組件服務器

props 基本語法：app

父組件--（pass props）----》子組件函數

使用選項props來聲明須要從父級接收的數據。ui

props的值有兩種方式：component

方式一：字符串數組，數組中的字符串就是傳遞時的名稱。htm

方式二：對象，對象能夠設置傳遞時的類型，也能夠設置默認值等；對象

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><div id="app"><!--    只有使用了v-bind纔會識別爲變量-->    <cpn :cmovies="movies" ></cpn><!--可以顯示默認值，由於下面設置了默認值且沒有進行傳參數-->    <cpn :cmovies="movies" :cmessage="message"></cpn><!--對比，已經設置了參數，則會顯示已經傳過來的參數--></div><body><template id="cpn"><!--注意：組件模本只能包含有個根目錄-->    <div>        <ul>            <li v-for="item in cmovies">{{item}}</li>        </ul>        {{cmessage}}    </div></template><script src="vue.js"></script><script>/*父傳子使用props*//*但願將父組件中的數據傳遞給子組件,而後讓子組件進行展現*/    const cpn={        template:'#cpn',        data(){            return{}        },        methods:{},        // props:["cmovies","cmessage"]        props:{            //定義成對象時，是能夠對他進行類型的限制            // cmovies:Array,            // cmessage:String,        //    2提供一些默認值以及必須傳遞的值            cmovies:{                type:Array,                default(){     /*若是是數組的話，默認值必須設置成爲一個工廠函數，進行返回 */                    return []                }            },            cmessage:{                type: String,                default:"assasas",     /*設置默認值*/                // required:true     /*該屬性是必須傳遞的值*/            }        }        };    const app=new Vue({         /*當作root父組件*/        el:'#app',        data:{            message:'你好啊',            movies:["海王","海賊王","海爾"]  /*父組件的數據*/        },        components:{            cpn   /*加強寫法中的自變量屬性加強寫法*/        }    })</script></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。