快捷導(dǎo)航

vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法

更新時(shí)間：2017年07月17日 16:07:31 作者：百里登風(fēng)

本篇文章主要介紹了vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法，具有一定的參考價(jià)值，有興趣的可以了解一下

本文介紹了vue2.x 父組件監(jiān)聽子組件事件并傳回信息，分享給大家，希望此文章對(duì)各位有所幫助

利用vm.$emit

1、在父組件中引用子組件

<child @from-child-msg="listenChildMsg"></child >

2、子組件中使用$emit發(fā)送事件

this.$emit('from-child-msg', '這是子組件傳遞的消息');

demo

<!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>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    input, select {
      height: 30px;
    }
  </style>
</head>
<body>
  <div id="app">
    <child value="name" @msg-from-child="getMsgFromChild"></child>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
  <script>
    Vue.component('child', {
      data: function () {
        return {
          val: this.value
        }
      },
      props: ['value'],
      methods: {
        handleClick () {
          this.$emit('msg-from-child', this.val)
        }
      },
      template: `
        <div><input type="text" v-model="val"><button type="button" @click="handleClick">確定</button></div>
      `
    })
    new Vue ({
      el: '#app',
      data: {
        
      },
      methods: {
        getMsgFromChild (v) {
          alert('msg: ' + v)
        }
      }
    })
  </script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

web前端vue實(shí)現(xiàn)插值文本和輸出原始html
這篇文章主要介紹了web前端vue實(shí)現(xiàn)插值文本和輸出原始html，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-01-01
vue實(shí)現(xiàn)列表無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表無(wú)縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue3自定義指令看完這篇就入門了
不同于vue2不需要被use使用,vue3的機(jī)制是你的指令必須要被注冊(cè)成方法的,這樣你才能全局使用到自定義指令,下面這篇文章主要給大家介紹了關(guān)于vue3自定義指令的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue 組件開發(fā)原理與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue 組件開發(fā)原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件開發(fā)的原理與實(shí)現(xiàn)方法,需要的朋友可以參考下
2019-11-11
VUE開發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)的醫(yī)院設(shè)置頁(yè)面步驟
這篇文章主要為大家介紹了VUE開發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)的醫(yī)院設(shè)置頁(yè)面步驟，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
vue實(shí)現(xiàn)登錄時(shí)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時(shí)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue動(dòng)畫事件詳解及過渡動(dòng)畫實(shí)例
通過 Vue.js 的過渡系統(tǒng)，可以在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過渡效果。Vue.js 會(huì)在適當(dāng)?shù)臅r(shí)機(jī)為你觸發(fā) CSS 過渡或動(dòng)畫，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過渡過程中執(zhí)行自定義的 DOM 操作
2019-02-02
tomcat部署前端vue項(xiàng)目步驟(項(xiàng)目上線具體操作)
在實(shí)際開發(fā)中,我們經(jīng)常會(huì)遇到將Vue項(xiàng)目部署到Tomcat服務(wù)器上的需求,下面這篇文章主要給大家介紹了關(guān)于tomcat部署前端vue項(xiàng)目(項(xiàng)目上線具體操作)的相關(guān)資料,需要的朋友可以參考下
2024-07-07
Vue的watch和computed方法的使用及區(qū)別介紹
Vue的watch屬性可以用來(lái)監(jiān)聽data屬性中數(shù)據(jù)的變化。這篇文章主要介紹了Vue的watch和computed方法的使用及區(qū)別,需要的朋友可以參考下
2018-09-09
vue3 teleport的使用案例詳解
這篇文章主要介紹了vue3 teleport的使用demo,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-11-11