国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

Vue 之孫組件向爺組件通信的實現

2019-11-19 11:43:37
字體:
來源:轉載
供稿:網友

如何把孫組件內特定的數據傳給爺組件?

例如

把孫組件的名字傳給爺組件并在爺組件上顯示

思路

  • 在孫組件被點擊后 emit 事件 1 和孫組件的名字
  • 在父組件上監聽孫組件 emit 出的事件 1,再次 emit 事件 2
  • 在爺組件上監聽父組件 emit 出的事件 2,并觸發處理函數
  • 這個處理函數將父組件傳出的子組件名字顯示在父組件上
<!DOCTYPE html><html lang="en" dir="ltr"> <head>  <meta charset="utf-8">  <title></title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script> </head> <body>  <div id="app">   child name: {{child}}   <parent v-on:say2='greeting("child", $event)'></parent>  </div> </body> <script>  Vue.component('parent', {   template: `   <div>    <child v-on:say1='$emit("say2", $event)'></child>   </div>   `  })  Vue.component('child', {   template: `    <div>     child     <button v-on:click='$emit("say1", "Jack")'>greeting</button>    </div>   `  })  new Vue({   el: '#app',   data: {    child: '',   },   methods: {    greeting: function (key, value) {     this[key] = value    },   }  }) </script></html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 搜索| 保亭| 呼玛县| 北京市| 克山县| 兰考县| 苍梧县| 休宁县| 通道| 威信县| 闵行区| 永登县| 内江市| 芮城县| 安义县| 玉林市| 景德镇市| 读书| 天祝| 手游| 彭州市| 金门县| 泸溪县| 潜山县| 临漳县| 田东县| 隆德县| 泌阳县| 苗栗市| 余姚市| 鹿泉市| 增城市| 秦皇岛市| 枣庄市| 塔河县| 永嘉县| 陵水| 宁波市| 米脂县| 邹城市| 墨玉县|