Vue 之孫組件向爺組件通信的實(shí)現(xiàn)

更新時(shí)間：2019年04月23日 14:26:20 作者：TaoWu

這篇文章主要介紹了Vue 之孫組件向爺組件通信的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

如何把孫組件內(nèi)特定的數(shù)據(jù)傳給爺組件？

例如

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

思路

在孫組件被點(diǎn)擊后 emit 事件 1 和孫組件的名字
在父組件上監(jiān)聽孫組件 emit 出的事件 1，再次 emit 事件 2
在爺組件上監(jiān)聽父組件 emit 出的事件 2，并觸發(fā)處理函數(shù)
這個(gè)處理函數(shù)將父組件傳出的子組件名字顯示在父組件上

<!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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

在vue中v-bind使用三目運(yùn)算符綁定class的實(shí)例
今天小編就為大家分享一篇在vue中v-bind使用三目運(yùn)算符綁定class的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
element?ui中el-form-item的屬性rules的用法示例小結(jié)
這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2024-07-07
詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問題
這篇文章主要介紹了詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
詳解如何在Vue3使用＜script lang=“ts“ setup＞語法糖
本文主要介紹了在Vue3使用＜script lang=“ts“ setup＞語法糖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
vue項(xiàng)目開啟gzip壓縮功能簡(jiǎn)單實(shí)例
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目開啟gzip壓縮功能的相關(guān)資料,gizp壓縮是一種http請(qǐng)求優(yōu)化方式,通過減少文件體積來提高加載速度,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
vue使用echarts時(shí)created里拿到的數(shù)據(jù)無法渲染的解決
這篇文章主要介紹了vue使用echarts時(shí)created里拿到的數(shù)據(jù)無法渲染的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
深入了解vue2與vue3的生命周期對(duì)比
這篇文章主要為大家介紹了vue2與vue3的生命周期對(duì)比，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
vant?Cascader級(jí)聯(lián)選擇實(shí)現(xiàn)可以選擇任意一層級(jí)
這篇文章主要介紹了vant?Cascader級(jí)聯(lián)選擇實(shí)現(xiàn)可以選擇任意一層級(jí)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
antv完成區(qū)間柱形圖一列多柱配置實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了antv完成區(qū)間柱形圖一列多柱配置實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
使用antv替代Echarts實(shí)現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實(shí)現(xiàn)數(shù)據(jù)可視化圖表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08