Vue中$emit的用法

子組件可以使用$emit調(diào)用父組件的方法并傳遞數(shù)據(jù)

示例

子組件:

<template>
  <div>
      <button @click="sendMsgToParent">向父組件傳值</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMsgToParent:function () {
        this.$emit("childMsg","hello world!");
      }
    }
  }
</script>

父組件:

<template>
  <div id="app">
    //@childMsg 與子組件中this.$emit("childMsg","hello world!")起的名字一致
    <child @childMsg="showChildMsg"></child>
  </div>
</template>

<script>
  import child from './components/Child'
  export default {
    name: "app",
    components: {
      child
    },
    methods:{
      showChildMsg:function (data) {
        console.log(data);
      }
    }
  }
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 什么是組件? 組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素,封裝...
    youins閱讀 9,708評論 0 13
  • 一、 組件component 1. 什么是組件? 組件(Component)是 Vue.js 最強(qiáng)大的功能之一。組...
    饑人谷_Leonardo閱讀 2,162評論 0 18
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,373評論 0 6
  • 主要還是自己看的,所有內(nèi)容來自官方文檔。 介紹 Vue.js 是什么 Vue (讀音 /vju?/,類似于 vie...
    Leonzai閱讀 3,540評論 0 25
  • 放不下的我 放不下你 這一年,在這個冬季,這一天里,格外的寒冷。 還記得那一句不喜歡你 還記得那一句對不起 還記得...
    溟魅吖閱讀 334評論 0 2

友情鏈接更多精彩內(nèi)容