vuejs父子組件事件監聽_Vuejs中vm$on有什麼實際意義怎麼使用文檔里的監聽又是什麼意思呢

Ⅰ 使用Vue父子組件通信實現todolist的功能示例代碼

先上代碼
<body>
<div
id="root">
<div>
<input
v-model="inputValue"
/讓友>
<button
@click="handleClick">submit</button>
</div>
<ul>
<todolist
v-for="(item,index)
of
list"
:key="index"
:content="item"
:index="index"
@delete="handle"
></todolist>
</ul>
</div>
<script>
Vue.component("todolist",{
props:
['content','index'],
template:
'<li
@click="handleDelete">{{content}}</li>',
methods:
{
handleDelete:function(){
this.$emit('delete',this.index)
}
}
})
new
Vue({
el:"#root",
data:
{
inputValue:'',
list:[]
},
methods:
{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handle:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
創建todolist的基本結構
<div
id="root">
<div>
<input
v-model="inputValue"
/>
<button
@click="handleClick">submit</button>
</div>
<ul>
<todolist
v-for="(item,index)
of
list"
:key="index"
:content="item"
:index="index"
@delete="handle"
></todolist>
</ul>
</div>
在這里我們創建了一個todolist標簽作為父組件，讓它在裡面循環遍歷list作為我們的輸出，同伍滑判時定義了一個delete的監聽事件。
接下來在script標簽里定義子組件
Vue.component("todolist",{
props:
['content','index'],
template:
'<li
@click="handleDelete">{{content}}</li>',
methods:
{
handleDelete:function(){
this.$emit('delete',this.index)
}
}
})
定義了一個全局類型的子組件，子組件的props選項能夠接收來自父組件數據，props只能單向傳遞，即只能通過父組件腔改向子組件傳遞，這里將上面父組件的content和index傳遞下來。
將li標簽作為子組件的模板，添加監聽事件handleDelete用與點擊li標簽進行刪除。
在下面定義子組件的handleDelete方法，用this.$emit向父組件實現通信，這里傳入了一個delete的event，參數是index，父組件通過@delete監聽並接收參數
接下來是Vue實例
new
Vue({
el:"#root",
data:
{
inputValue:'',
list:[]
},
methods:
{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handle:function(index){
this.list.splice(index,1)
}
}
})
handleClick方法實現每次點擊submit按鈕時向list里添加值，在每次添加之後將輸入框清空。
而handle方法則是點擊刪除li標簽，這里通過接受傳入的index參數來判斷點擊的是哪一個li
這是刪除前：
這是刪除後：
總結：
通過點擊子組件的li實現向外觸發一個delete事件，而父組件監聽了子組件的delete事件，執行父組件的handle方法，從而刪除掉對應index的列表項，todolist中的list對應項也會被刪除掉。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。
您可能感興趣的文章:Vue中父子組件通訊之todolist組件功能開發Vue從TodoList中學父子組件通信詳解Vue的computed(計算屬性)使用實例之TodoListvue實現ToDoList簡單實例利用vue寫todolist單頁應用vue組件編寫之todolist組件實例詳解vue2的todolist入門小項目的詳細解析使用Vue完成一個簡單的todolist的方法Vue.js實現簡單ToDoList
前期准備（一）vue實現留言板todolist功能

Ⅱ Vue.js中vm.$on有什麼實際意義怎麼使用文檔里的監聽又是什麼意思呢

```js

//創建vue實例。

varvm=newVue()

//創建事件監聽@params監聽的事件名回調函數。

vm.$on('start',function(params){

console.log(params+'，我讓start事件觸發了');

})

//主動觸發事件，此時會觸發監聽的回調(我們列印的代碼就會運行)@params觸發的事件名傳遞的參數。

vm.$emit('start','我是觸發傳遞的參數')

```

Vue的$on就和addEventListener差不多，是創建一個事件監聽,
$emit 就和自定義事件一樣，你主動創建了一個事件，並且讓這個事件觸發了。
一般用來vue非父子組件之間傳遞數據(Vue的bus)

Ⅲ Vue-Cli—04.父子組件傳值|祖孫組件傳值|兄弟組件傳值

父組件向子組件傳值，可以通過綁定屬性傳值；子組件通過props接收父組件傳值。
父組件：

子組件：

子組件通過$emit觸發一個自定義事件，將更新的數據傳給父組件。
子組件：

父組件：

首先祖先給子孫後代傳值也是可以用props傳遞，一層層傳遞，如果嵌套了五六層，這種方法就顯得很繁瑣。
所以就用到了provide(提供)和inject(注入)。這兩個是配套使用的，以允許祖先向所有祖先後代注入一個依賴。祖先組件通過provide添加依賴數據，它裡面定義的數據，後代組件可以通過inject選擇性注入並直接使用。
注意： 後代組件通過inject注入祖級組件中的依賴數據，跟props一樣，接收的數據是只讀的，不能修改。

祖先組件：

後代組件：

在Vue的原型對象上，添加一個 $bus屬性 ，該屬性的的屬性值是一個Vue實例。Vue的所有實例，都將共用同一個$bus。這個$bus屬性，稱之為：中央事件匯流排。
vm.$emit( eventName, […args] )： 觸發當前實例上的事件。附加參數都會傳給監聽器回調。
vm.$on( event, callback )： 監聽當前實例上的自定義事件。事件可以由 vm.$emit 觸發。回調函數會接收所有傳入事件觸發函數的額外參數。
vm.$once( event, callback )： 監聽一個自定義事件，但是只觸發一次。一旦觸發之後，監聽器就會被移除。
vm.$off( [event, callback] )： 移除自定義事件監聽器。

main.js文件：

兄弟A鴿子組件：
點擊鴿子組件中的『修改烏鴉數據』按鈕，可以修改烏鴉組件頁面的數據。

兄弟B烏鴉組件：

Ⅳ vue 組件通信方式，父子、隔代、兄弟三類通信，六種方法

Vue 組件間通信只要指以下 3 類通信：父子組件通信、隔代組件通信、兄弟組件通信，下面分別介紹每種通信方式且會說明此種方法可適用於哪類組件間通信。

父組件注入，子組件接收。
這種方法是 Vue 組件的基礎，相信大部分同學耳聞能詳，所以此處就不舉例展開介紹。

ref ：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例
$parent / $children ：訪問父 / 子實例

$attrs：包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 ( class 和 style 除外 )。
當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 ( class 和 style 除外 )，並且可以通過 v-bind="$attrs" 傳入內部組件。通常配合 inheritAttrs 選項一起使用。

$listeners ：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入笑梁內部組件

祖先組件中通過 provider 來提供變數，然後在子孫組件中通過 inject 來注入變數。provide / inject API 主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態，跨級組件間建立了一種主動提供與依賴注入的關系。

這種方法通過一個空的 Vue 實例作為中央事件匯流排（事件中心），用它來觸發事件和監聽事件，從而實現任何組件間的通信，包括父子、隔代、兄弟組件。

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。每一個 Vuex 應用的核心就是 store（倉庫）。「store」基本上就是一個容器，它包含著你的應用中大部分的狀態 ( state )。

Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地得到高效更新。
改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化。

vuex的詳細使用方法： vuex管理狀態倉庫使用詳解

a.vue 引用了一個detail組件

第一步：首先需要創建事件匯流排並將其導出，以便其它模塊可以使用或者監聽它。

兩個初始化事件中心的方法：

第二步：創建了 EventBus ，接下來你需要做到的就是在你的組件中載入它，並且調用同一個方法，就如你在父子組件中互相傳遞消息一樣。

假設你有兩個Vue頁面需要通信： A 和 B ，A頁面在按鈕上面綁定了點擊事件，發送一則消息，想通知 B頁面。

接下來，我們需要在 B頁面中接收這則消息。

同理我們也可以在 B頁面向 A頁面發送消息。這里主要用到的兩個方法：

如果使用不善，EventBus會是一種災難，到底是什麼樣的「災難」了？大家都知道vue是單頁應用，如果你在某一個頁面刷新了之後，與之相關的EventBus會被移除，這樣就導致業務走不下去。還要就是如果業務有反復操作的頁面，EventBus在監聽的時候就會觸發很多次，也是一個非常大的隱患。這時候我們就需要好好處理EventBus在項目中的關系。通常會用到，在vue頁面銷毀時，同時移除EventBus事件監聽。
如果想移除事件的監聽，可以像下面這樣操作：

$on 事件是不會自動清楚銷毀的，需要我們手動來銷毀，否則在b組件每次載入一次就會創建一個監聽，會重復監聽到數據。
可以使用 EventBus.$off('aMsg') 來移除應用內所有對此某個事件的監聽。
或者直接調用 EventBus.$off() 來移除所有事件頻道，不需要添加任何參數。

因為頁面跳轉的時候，a頁面在之前已基首經emit了，但是b頁面首次並沒有created，b頁面還監聽不到。
可以把A頁面組件中的emit事件寫在beforeDestory中去。因為這個時候，B頁面組件已經被created了，也就是我們寫的$on事件已經可以搏升數觸發了

所以可以，在beforeDestory的時候，$emit事件。例如：

【參考eventbus實戰記錄： https://www.jianshu.com/p/fde85549e3b0 】

Ⅳ vue 事件匯流排EventBus的概念、使用

兩個組件之間毫無關系，用到 vue 中的羨野告事件匯流排 EventBus的概念來傳遞數據

EventBus又稱事件匯流排，相當於一個全局的倉庫，任何組件都可以去這個倉庫里獲取事件

因為是全局的一個'倉庫'，所以初始化要在全局初始化(main.js)

有兩個組件A和B需要通信，他兄明們不是父子組件關系，B事件需要獲得A事件里的一組數據data

A組件已經向全局事件匯流排EventBus發送了一個aMsg事件，這時B組件就可以去aMsg監聽這個事件，並可以獲得一些數據脊嘩。

原文鏈接： https://blog.csdn.net/starzhou/article/details/119793562

Ⅵ vue單文件組件通常是如何調用實例方法的

Vue父組件向子組件傳遞事件/調用事件
不是傳遞數據（props）哦，適用於 Vue 2.0
方法一：子組件監聽父組件發送的方法
方法二：父組件調用子組件方法
子組件：
export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('監聽成功') }) }) }， methods { callMethod () { console.log('調用成功') } } }
父組件：
<child ref="child" @click="click"></child> export default { methods: { click () { this.$refs.child.$emit('childMethod') // 方法1 this.$refs.child.callMethod() // 方法2 }, components: { child: child } }
以上這篇Vue父組件調用子組件事件方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:VUEJS 2.0 子組件訪問/調用父組件的實例vue.js中父組件調用子組件的內部方法示例ES6下子組件調用父組件的方法(推薦)

Ⅶ vue中$refs, $emit, $on, $once, $off的使用詳解

父組運搜件調用子組件的方法，可以傳遞數據。
父組件：

子組件：

子組件調用父組件的方法並傳遞數據。

子組件：

父組件：

兄弟組件之間相互傳遞數據。
首先創建一個vue的空白實例（兄弟組件的橋梁）

子組件a:發送放使用$emit自定義事件把數據帶過去。

子組件b:接收方通過$on監聽自定義事件的callback接收數據

父組件：

監聽一個自定義事件，但是只觸發一次。一旦觸發之後，監聽器就會被移除。
將on變成once，即只執行一次。

移除自定義事件監聽器，語法：vm.$off( [event, callback] )
如果沒有提供參數，則移除所有的事件監聽器；（注意這條，一般在main.js中，移除所有事件綁定）
如果只提供了事件好悄胡，則移除該事件所有的監聽器；
如果同時提供了事件與回友攔調，則只移除這個回調的監聽器。

Ⅷ Vue基礎篇

內容簡介：
1）Vue指令
2）computed和watch
3）生命周期鉤子
4）組件間的傳參
5）插槽
6）修飾符
7）nextTick()

前端三大框架：
Vue：尤雨溪開發
React：Facebook主導開發
Angular：谷歌主導開發

為什麼選擇Vue?
1.國內Vue的市場份額佔比多
2.簡單易上手，非常適合前端開發初學者學習

前置知識：
1.HTML、CSS和JS基礎
2.了解Node和npm
3.webpack（可選，vue-cli已經封裝了打包功能）

使用Vue的吵或兩種方式：
1.直接script標簽引入vue.js文件
2.基於Node環境創建Vue項目（使用vue-cli初始化一個Vue項目）

前端框架與庫的區別
• jquery 庫 -> DOM(操作DOM) + 動畫+ ajax請求
• 框架 -> 全方位功能

一、指令
指令（Directives）是帶有 v- 前綴的特殊屬性。

插值表達式和v-text指令被直接解析為字元串；元素綁定 v-html 指令後，解析了msg 變數值裡面的html標簽，輸出真正的html元素。

v-model也可用在自定義組件上。

5.v-for（列表渲染）
使用v-for時應綁定key屬性，key屬性可以用來提升v-for渲染的效率

Vue 將被偵聽的數組的變更方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由於 JavaScript 的限制，Vue 不能檢測數組、對象的以下變化：1. 利用索引直接設置數組的某一項 2. 對象屬性的添加或刪除

二、computed和watch

三、生命周期鉤子
什麼是Vue生命周期？
Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程。
總共分為8個階段：創建前/後，掛載空褲前/後，更新前/後，銷毀前/後。
1）beforeCreate
此時實例上只有一些生命周期函數和默認的事件，此時data computed watch methods上的方法和數據均不能訪問。
2）created
此時可以讀取data的值，並可以對其進行操作，把方法、計算屬性也都掛載到了實例。但是依舊不能訪問el，不能獲取到DOM元素。
在這個鉤子函數中，我們可以進行http請求，把請求到的數據儲存在data中。
3）模板編譯，把data裡面的數據和vue語法寫的模板編譯成HTML
4）beforeMount
將編譯完成的HTML掛載到對應虛擬DOM，此時還未掛載到頁面上
5）mounted
編譯好的HTML已掛載到頁面上
6）beforeUpdate和updated
數據更新時調用，通常使用計算屬性或偵聽器取而代之
7）beforeDestroy
銷毀所有觀察者、組件及事件監聽
8）destroyed
組件已經完全銷毀，組件中的數據、方法、計算屬性、過濾器等都已不可用。

四、組件間的通信
1.父子組件間的通信
父子組件通信可以總結為props向下傳遞，事件向上傳遞。

單向數據流：父級 prop 的更新升虧伍會向下流動到子組件中，但反過來不行。
每個Vue實例都實現了事件介面：子組件使用 this.$emit(eventName,optionalPayload) 觸發自定義事件。父組件在使用子組件的地方直接用v-on來監聽子組件觸發的事件。

父組件通過ref直接調用子組件中的方法。
子組件調用父組件中的方法：
1）子組件中通過 this.$parent.fatherMethod() 來調用父組件的方法
2）子組件用$emit向父組件觸發一個事件，父組件監聽這個事件
3）父組件通過props把方法傳入子組件中（type: Function），在子組件里直接調用這個方法

2.兄弟組件間的通信
其中一種方法是讓父組件充當兩個子組件之間的中間件（中繼）；
另一種就是使用EventBus（事件匯流排），它允許兩個組件之間直接通信，而不需要涉及父組件：

Vue原型上的方法：

五、插槽

3）作用域插槽

使用場景：
在使用ElementUI組件庫的el-table組件時，表格的編輯和刪除操作要用到作用域插槽。因為el-table組件，就是當前組件的子組件。通過作用域插槽很容易拿到當前表格行的索引和內容，這樣就可以很方便地進行編輯、刪除的操作。v-slot指令是Vue2.6之後，作用域插槽的新語法，舊語法（slot-scope）現在還保留，但3.0之後會移除。

六、修飾符

2.事件修飾符
vue提倡的是在方法中只有純粹的數據邏輯，而不是去處理 DOM 事件細節，所以提供了事件修飾符用於DOM的事件處理。

3.按鍵修飾符

七、nextTick()
定義：在下次 DOM 更新循環結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。（當數據更新了，在dom中渲染後，自動執行nextTick的回調）

應用場景：需要在視圖更新之後，基於新的視圖進行操作。

Ⅸ vue父子組件之間的通信

概述

每一個.vue 文件就是一個組件，組件和組件相互組合，就成了一個應用，這就涉及到的組件和組件之間的通信，最常用的就是父子之間的通信。在vue 中，在一個組件中通過 import 引入另一個組件，這個組件就是父組件，被引入的組件就是子組件。

在vue-cli 項目中，src 文件夾下有一個App.vue 文件，它的script標簽中，import Hello from './components/Hello'，那麼App.vue 就是父組件，components 文件夾下的Hello.vue 就是子組件。父組件通過props 向子組件傳遞數據，子組件通過自定義事件向父組件傳遞數據。

父------子

父組件向子組件傳值, 它主要是通過元素的屬性進行的. 在App.vue 的template中,有一個, 這就是我們引入的子組件. 給其添加屬性如mes-father="message from father"; 父組件將數據傳遞進去,子組件需要接收才能使用. 怎樣接收呢?

在Hello.vue 中, export default 後面的對象中,添加一個欄位props, 它是一個數組, 專門用來接收父組件傳遞過來的數據. props: ["mesFather"], 這里定義了mesFather 字元串, 和父組件中定義的元素的屬性一一對應.

注意：在父組件,就是在元素中定義的屬性是mes-father，沒有一一對應啊? 這主要是因為，在html 元素中大小寫是不敏感的。如果我們寫成，裡面的mesFather 就會轉化成mesfather, 相當於我們向子組件傳遞了一個mesfather數據，如果在js 文件中，我們定義props: ["mesFather"]，我們是接受不到數據的，因為js 是區分大小寫的，只能寫成props: ["mesfather"]. 但是在js 文件中，像這種兩個單詞拼成的數據，我們習慣用駝峰命名法，所以vue 做了一激神個轉化，如果在組件中屬性是- 表示，它自動會轉化成駝峰式。傳進來的數據是mes-father, 轉化成mesFather, 我們在js 裡面寫mesFather, 一一對應，子組件可以接受到組件。props 屬性是和data，methods 屬性並列的，屬同一級別。props 屬性裡面定義的變數，在子組件中的template 中可以直接使用。

App.vue文件：

Hello.vue文件：

這時，在頁面中看到 message from father 字樣，父元素向子元素傳遞數據成功。

子------父

子組件向父組件傳遞數據，需要用到自定義事攜鉛野件。例如，我們在Hello.vue，寫入一個input, 接收用戶輸入，我們想把用戶輸入的數據傳給父組件。這時，input 需要先綁定一個keypress 事件，獲取用戶的輸入，同時還要發射自定義事件，如valueUp, 父組件只要監聽這個自定義事件，就可以知道子組件要向他傳遞數據了。子組件在發射自定義事件時，還可以攜帶參數，父組件在監聽該事件時，還可以接受參數，參數，就是要傳遞的數據。

在Hello.vue template中，添加一個input輸入框，給它一個v-model 獲取用戶的輸入，再添加keypress的事件，用於發射事件，傳輸數據。script 中添加data，定義變數來獲取用戶的輸入，添加methods 來處理keypress事件的處理函數enter

Hello.vue文件：

在App.vue 中，template中hello 組件綁定一個自定義事件，@valueUp =「receive」, 用於監聽子組件發射的事件，再寫一個辯喊p 元素，用於展示子組件傳遞過來的數據，<p>子組件傳遞過來的數據{{childMes }}</p>

相應地，在scrpit中，data 中，定義一個變數childMes, 並在methods 中，定義一個事件處理函數reciever。

App.vue文件：

這時在input中輸入內容，然後按enter鍵，就以看到子組件傳遞過來的數據，子組件向父組件傳遞數據成功。

當在input輸入框中輸入數據，並按enter鍵時，它會觸發keypress.enter事件，從而調用事件處理函數enter，在enter 中，我們發射了一個事件valueUp，並攜帶了一個參數，由於在<hello @valueUp=」recieve」></hello> 組件中，我們綁定valueUp 事件，所以父組件在時刻監聽valueUp 事件，當子組件發射value 事件時，父組件立刻捕獲到，並立即調用它的回調函數receive, 在receive 中，我們獲取到子組件傳遞過來的數據，並賦值了data 中的變數childMes, 由於data 數據發生變化，從而觸發dom更新，頁面中就顯示子組件傳遞過來的內容。

謝謝！結束！

Ⅹ vue-bus實現兄弟組件通訊

一、為枝隱蘆什麼要使用vue-bus？猛帶

學習vue的開發者都知道，父子組件的直接的通訊直接使用vue提供的props屬性和emit方法。props接受來自父組件的參數，emit將子組件的參數傳遞給父組件。這樣一來父子組件之間的參數傳遞就得到了解決。（之前做項目的時候看到$parent和$children也可以進行父子組件和兄弟之間的參數傳遞，但是不提倡，原因在於如果組件想要替換位置就有問題）。

那麼問題來了，兄弟組件如何進行通訊？有哪些方法

1、vuex全局狀態管理

2、bus匯流排機制/發布訂閱者模式/觀察者模式

兩者相比較，前者適用於大型項目的開發，如果項目業務沒那麼復雜，推薦使用bus來進行解決這類問題。

二、vue-bus如何使用？

第一步：使用npm install vue-bus --save

第二步：在main.js進行全局注冊

第三步：在一個頁面引用兩個兄弟組件

第四步：使用emit進行參數傳遞

第五步：在created或mounted生命周期鉤子，執行事件監聽。最後記得將觸發的事件銷毀，不然會出現點擊多次觸發的情況。

三、bus匯流排機制/發布訂閱者模式/觀察者模式

比如有一個bus對象（中央事件匯流排），這個對象上有兩個方法，一個是on（監聽，也就是訂閱），一個是emit（觸發，也就是發布），就好比我們訂閱報紙，到報社去付錢，才知道你要訂閱的。

觀察者模式是用來監聽數據變化，改變視圖層。

有什麼解釋的不好的，希望攜拿幫我指正，萬分感謝。

對你有幫助的給個贊

導航:首頁 > 編程語言 > vuejs父子組件事件監聽

vuejs父子組件事件監聽

與vuejs父子組件事件監聽相關的資料

友情鏈接