快捷導(dǎo)航

vue父子組件的通信方法(實(shí)例詳解)

更新時(shí)間：2019年11月10日 07:58:49 作者：個(gè)人升級(jí)打怪

這篇文章主要介紹了vue父子組件的通信的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、父組件向子組件傳遞數(shù)據(jù)

1、首先形成父子組件關(guān)系

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="../js/vue.js"></script>
</head>
<body>
 <div id="app">
 </div>
 <template id="cpn">
  <div>
   <h2>{{cmovies}}</h2>
   <p>{{cmessage}}</p>
  </div>
 </template>
 <script>
  const cpn = {
   template: `#cpn`,
   data() {
    return {}
   },
   methods: {}
  }
  let vm = new Vue({
   el: '#app',
   data: () => ({
    message: '父組件的數(shù)據(jù)',
    movies: ['戰(zhàn)狼1', '流浪地球', '攀登者']
   }),
   components: {
    cpn
   }
  })
 </script>
</body>
</html>

2、在子組件中定義一個(gè)props，定義兩個(gè)變量（messages）（moviess）

props: ['messages', 'moviess']

3、使用子組件時(shí)，用V-bind綁定兩個(gè)變量（messages）（moviess），并且把父組件中的數(shù)據(jù)（message）（movies）傳給這兩個(gè)變量。

<cpn :messages="message" :moviess="movies"></cpn>
<!-- 不支持駝峰命名法 大寫字母之間用 - 隔開 -->

****完整代碼*****

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="../js/vue.js"></script>
</head>
<body>
 <div id="app">
  <cpn :messages="message" :moviess="movies"></cpn>
  <!-- 不支持駝峰命名法 大寫字母之間用 - 隔開 -->
 </div>
 <!-- 父?jìng)髯?-->
 <!-- 
  1、建立父子關(guān)系
  2、在子組件中定義一個(gè)props，定義兩個(gè)變量 （messages） （moviess）
  3、使用子組件時(shí)，用V-bind綁定兩個(gè)變量，并且把父組件中的數(shù)據(jù)（message）（movies）傳給這兩個(gè)變量。
  -->
 <template id="cpn">
  <div>
   <h2>{{messages}}</h2>
   <ul>
    <li v-for="item in moviess">
     {{item}}
    </li>
   </ul>
  </div>
 </template>
 <script>
  const cpn = {
   template: `#cpn`,
   // props: ['messages', 'moviess'],
   props: {
    // 1、類型限制
    // messages:Array,
    // moviess:String,
    // 提供一些默認(rèn)值
    messages: {
     type: String,
     default: 'aaaa',
     required: true
    },
    // 當(dāng)使用組件的時(shí)候，沒(méi)有綁定props中定義的變量，就會(huì)顯示定義的默認(rèn)值
    moviess: {
     // 類型是對(duì)象或數(shù)組，默認(rèn)值必需是一個(gè)函數(shù)。 
     type: Array,
     // default: []
     default() {
      return []
     }
    }
   },
   data() {
    return {}
   },
   methods: {}
  }
  let vm = new Vue({
   el: '#app',
   data: () => ({
    message: '父組件的數(shù)據(jù)',
    movies: ['戰(zhàn)狼1', '流浪地球', '攀登者'],
   }),
   components: {
    cpn
   }
  })
 </script>
</body>
</html>

** props中補(bǔ)充寫法

props: {
    // 1、類型限制
    // messages:Array,
    // moviess:String,

    // 提供一些默認(rèn)值
    messages: {
     type: String,
     default: 'aaaa',
     required: true
    },
    // 當(dāng)使用組件的時(shí)候，沒(méi)有綁定props中定義的變量，就會(huì)顯示定義的默認(rèn)值
    moviess: {
     // 類型是對(duì)象或數(shù)組，默認(rèn)值必需是一個(gè)函數(shù)。 
     type: Array,
     // default: []
     default() {
      return []
     }
    }
   }

二、子組件向父組件傳數(shù)據(jù)

1、構(gòu)成父子組件關(guān)系

2、在子組件中自定義一個(gè)事件作用：發(fā)射一個(gè)事件給父組件

<button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
   methods: {
    btnclick: function (item) {
     // 發(fā)射事件：自定義事件
     this.$emit('itemclick', item)
    }
   }

3、在父組件的模板中使用子組件中定義的事件 @itemclick="cpnclick" 并且在父組件創(chuàng)建一個(gè)新的事件 cpnclick

<cpn @itemclick="cpnclick"></cpn>
   methods: {
    cpnclick: function (item) {
     console.log('cpnclick', item)
    }
   }

***完整代碼***

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="../js/vue.js"></script>
</head>
<!-- 父組件模板 -->
<div id="app">
 <cpn @itemclick="cpnclick"></cpn>
</div>
<!-- 
 1、構(gòu)成父子組件關(guān)系
 2、在子組件定義一個(gè)事件，作用是 發(fā)射一個(gè)事件給父組件。this.$emit('itemclick')
 3、在父組件的模板中使用子組件中定義的事件 @itemclick="cpnclick" ，并且在父組件創(chuàng)建一個(gè)新的事件 cpnclick ，
 這里面可以寫傳給父組件數(shù)據(jù)的邏輯以及限制
 -->
<body>
 <!-- 子組件模板 -->
 <template id="cpn">
  <div>
   <button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
  </div>
 </template>
 <script>
  // 子組件
  const cpn = {
   template: `#cpn`,
   data() {
    return {
     categories: [
      { id: 'aa', name: '熱門推薦' },
      { id: 'bb', name: '手機(jī)數(shù)碼' },
      { id: 'cc', name: '智能家居' },
      { id: 'dd', name: '美容美發(fā)' }
     ]
    }
   },
   methods: {
    btnclick: function (item) {
     // 發(fā)射事件：自定義事件
     this.$emit('itemclick', item)
    }
   }
  }
  // 父組件
  let vm = new Vue({
   el: '#app',
   data: () => ({}),
   components: {
    cpn
   },
   methods: {
    cpnclick: function (item) {
     console.log('cpnclick', item)
    }
   }
  })
 </script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的vue父子組件的通信方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: