快捷導(dǎo)航

詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件

更新時(shí)間：2020年11月13日 08:56:42 作者：谷歌研發(fā)技術(shù)團(tuán)隊(duì)

這篇文章主要介紹了詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

我把這個(gè)實(shí)例分為幾個(gè)步驟解讀：

1、父組件的button元素綁定click事件,該事件指向notify方法
2、給子組件注冊(cè)一個(gè)ref=“child”
3、父組件的notify的方法在處理時(shí)，使用了$refs.child把事件傳遞給子組件的parentMsg方法，同時(shí)攜帶著父組件中的參數(shù)msg
4、子組件接收到父組件的事件后，調(diào)用了parentMsg方法，把接收到的msg放到message數(shù)組中

父組件

<template>
 <div id="app">
  <!--父組件-->
  <input v-model="msg" />
  <button v-on:click="notify">廣播事件</button>
  <!--子組件-->
  <popup ref="child"></popup>
 </div>
</template>
 <script>
import popup from "@/components/popup";
export default {
 name: "app",
 data: function () {
  return {
   msg: "",
  };
 },
 components: {
  popup,
 },
 methods: {
  notify: function () {
   if (this.msg.trim()) {
    this.$refs.child.parentMsg(this.msg);
   }
  },
 },
};
</script>
 <style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

子組件

<template>
 <div>
  <ul>
   <li v-for="item in messages">父組件輸入了：{{ item }}</li>
  </ul>
 </div>
</template>
 <style>
body {
 background-color: #ffffff;
}
</style>
 <script>
export default {
 name: "popup",
 data: function () {
  return {
   messages: [],
  };
 },
 methods: {
  parentMsg: function (msg) {
   this.messages.push(msg);
  },
 },
};
</script>

到此這篇關(guān)于詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件的文章就介紹到這了,更多相關(guān)vue 父組件觸發(fā)子組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue + AnimeJS實(shí)現(xiàn)3d輪播圖的詳細(xì)代碼
輪播圖在開(kāi)發(fā)中是經(jīng)常用到的,3D輪播圖是其中最常用的一種,所以在這篇文章中將給大家介紹Vue + AnimeJS實(shí)現(xiàn)3d輪播圖,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下
2024-01-01
Vue中provide和inject的使用教程詳解
在?Vue?中,provide?和?inject?是用于實(shí)現(xiàn)祖先組件向后代組件傳遞數(shù)據(jù)的一種方式,本文主要來(lái)和大家詳細(xì)講講provide和inject的使用方法,希望對(duì)大家有所幫助
2024-02-02
vue elementUI 表單嵌套驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了vue + elementUI 表單嵌套驗(yàn)證,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-11-11
Vue做一個(gè)簡(jiǎn)單的隨機(jī)點(diǎn)名冊(cè)
這篇文章主要介紹的是如何用Vue做一個(gè)簡(jiǎn)單的隨機(jī)點(diǎn)名冊(cè)，主要是做個(gè)簡(jiǎn)單的點(diǎn)名器，不做樣式,需要的朋友可以參考一下，希望對(duì)你有所幫助
2021-12-12
vue使用echarts實(shí)現(xiàn)三維圖表繪制
這篇文章主要為大家詳細(xì)介紹了vue如何在項(xiàng)目中使用echarts實(shí)現(xiàn)三維圖表的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下
2023-08-08
vue3如何避免樣式污染的方法示例
本文主要介紹了vue3如何避免樣式污染的方法示例,使用scoped可以避免父組件的樣式滲透到子組件中,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-09-09
element-ui多文件上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了element-ui多文件上傳的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue項(xiàng)目本地開(kāi)發(fā)使用Nginx配置代理后端接口問(wèn)題
這篇文章主要介紹了vue項(xiàng)目本地開(kāi)發(fā)使用Nginx配置代理后端接口問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
詳解vue組件中使用路由方法
在本篇文章里小編給大家分享了關(guān)于vue組件中使用路由的詳細(xì)步驟內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。
2019-02-02
vue.js父子組件傳參的原理與實(shí)現(xiàn)方法
這篇文章主要介紹了vue.js父子組件傳參的原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js父子組件傳參的基本原理、實(shí)現(xiàn)方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2023-04-04