父子組件之間的通信 · 常用筆記

# 父子組件之間的通信 # 一般開發流程 - 比如在一個頁面中我們從服務器請求到了很多的數據 - 其中一部分數據并非使我們整個頁面的大組件來展示的而是需要下面的子組件進行展示 - 這個時候并不會讓子組件再次發送一個網絡強求而是直接讓大組件（父組件將數據傳遞給小組件（子組件） - 因為向服務器發送網路請求對服務器壓力是很大的 # 如何進行父子組件間的通信呢？官方解釋： - 通過props向子組件傳遞數據 props是properties（屬性）單詞的縮寫 - 通過事件向父組件發送消息（emit） ![](https://img.kancloud.cn/6f/d9/6fd97968594a31f253877017476ec33e_459x202.png) 父組件通過----->props----->子組件子組件---->$emit 自定義事件--->傳遞給父組件 ``` <pre class="calibre13">``` 父組件id是 app 子組件id是cpn 在父組件中傳值給子組件 <cpn v-bind:cmovies = "movies"></cpn> 子組件定義屬性props:['cmovies'] cmovies里面就有了數據第一種方式：父組件定義數據movies 子組件進行綁定即可傳值到子組件第二種方式：在子組件中定義props屬性：props:['cmessage'] 在父組件中定義數據 message 在子組件模板中 增加data(){ return {}} 子模板中使用 {{cmessage}}也可以拿到父組建的值 ``` ``` # 父傳子 ``` <pre class="calibre13">``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">  <cpn :cmovies="movies" :cmessage="message"></cpn> </div> <template id="cpn"> <div> {{cmovies}} {{cmessage}} </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script> const cpn = { //創建子組件 template: '#cpn', //props:['cmovies','cmessage'], //接收父組件傳值數組形式 //下面演示對象傳遞的形式 props:{ cmessage: { type: String, default: 'aaaaa' }, cmovies: { type: Array, default() { return [] } } } } const app = new Vue({ //父組件 el: '#app', data: { message: "測試數據", movies: ['哪吒','海賊王','斗破蒼穹','斗羅大陸'] }, components: { //注冊組件 cpn } }) </script> </body> </html> ``` ``` # 子-->父通信 ``` <pre class="calibre13">``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  <div id="app">  <cpn @itemclick="cpnClick"></cpn> </div>  <template id="cpn"> <div> <button v-for="item in infos" @click="btnClick(item)">{{item.name}}</button> </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 1 子組件 const cpn = { template: '#cpn', data(){ return{ infos: [ {id: '1',name: '熱門推薦' }, {id: '2',name: '手機數碼' }, {id: '3',name: '家用家電' }, {id: '4',name: '電腦辦公' } ] } }, methods: { btnClick(item) { //console.log(item) //itemClick 發射事件的名稱 item 是發送的參數 this.$emit('itemclick',item) //自定義事件 } } } // 2父組件 const app = new Vue({ el: '#app', data: { message: "測試數據" }, methods: { cpnClick(item) { console.log('父組件接收-->'+item.name) } }, //注冊子組件 components: { cpn } }) </script> </body> </html> ``` ``` # 子組件訪問父組件的內容 ``` <pre class="calibre14">``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} <cpn></cpn> </div> <template id="cpn"> <div> <h1>這是子組件標題</h1> <p>這是子組件內容</p> <button @click="btnClick">獲取父組件對象</button> </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: "測試數據" }, components: { cpn:{ template:'#cpn', methods: { btnClick() { console.log(this); //console.log(this.$parent.message); console.log(this.$root.message); //建議采用這種方式因為上面那種方式如果嵌套多個組件如果找不到name值可能會報錯 } } } } }) </script> </body> </html> ``` ```