vue組件間通信子與父詳解（二）
更新時間：2017年11月07日 11:49:14 作者：匿名的girl
這篇文章主要為大家詳細介紹了vue組件間通信子與父的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
接著vue組件父與子通信詳解繼續(xù)學習。
二、組件間通信（子組件傳值給父組件）
通過事件的方式來完成數(shù)據(jù)的傳輸。
①在父組件中 定義一個方法，用來接收子組件所通過事件傳來的值
methods:{
recvMsg:function(msg){
//參數(shù)msg就是子組件通過事件出來的數(shù)據(jù)
}
}
②綁定事件處理函數(shù)
事件一般情況 都是自定義事件
<child-component @myEvent="recvMsg"></child-component>
③在子組件觸發(fā)事件
事件名，值
this.$emit('myEvent',myPhone)
//觸發(fā)一個叫做myEvent的事件，同時把第二個參數(shù)數(shù)據(jù)傳遞給事件對應的處理函數(shù)
總結：
在Vue 中，父子組件的關系可以總結為 props down, events up。父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>組件間通信子傳父</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</div>
<script>
//通過事件的方式傳遞
// 綁定 -- 觸發(fā)
Vue.component("parent-component",{
data:function(){
return {
sonMsg:""
}
},
methods:{
//msg參數(shù)要拿子傳遞的值
recvMsg:function(msg){
console.log("父組件接收到子組件的數(shù)據(jù)"+msg);
this.sonMsg = msg;
}
},
template:`
<div>
<h1>這是父組件</h1>
<p>子組件傳來的數(shù)據(jù)為：{{sonMsg}}</p>
<hr/>
<child-component @customEvent="recvMsg"></child-component>
</div>
`
})
Vue.component("child-component",{
methods:{
sendMsg:function(){
//來觸發(fā)綁定給子組件的自定義方法
//this.$emit("customEvent");第一個參數(shù)觸發(fā)
//this.$emit("customEvent");第二個參數(shù)傳值
this.$emit("customEvent","哈哈哈哈");
},
},
template:`
<div>
<h1>這是子組件</h1>
<button @click="sendMsg">senToFather</button>
</div>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
在子組件中放上一個input，點擊按鈕 把用戶輸入的內(nèi)容發(fā)給父組件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>子與父之間的通信</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</div>
<script>
//創(chuàng)建父組件
Vue.component("parent-component",{
//data屬性
data:function(){
return{
sonMsg:""
}
},
methods:{
recvMsg:function(msg){
this.sonMsg = msg
}
},
template:`
<div>
<h1>父組件</h1>
<h4>子組件傳遞的數(shù)據(jù)：{{sonMsg}}</h4>
<child-component @customEvent="recvMsg"></child-component>
</div>
`
})
//創(chuàng)建子組件
Vue.component("child-component",{
data:function(){
return {
myInput:""
}
},
methods:{
sendMsg:function(){
this.$emit("customEvent",this.myInput);
}
},
template:`
<div>
<h1>子組件</h1>
<input type="text" v-model="myInput"/>
<button @click="sendMsg">發(fā)送</button>
</div>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue中用js如何實現(xiàn)循環(huán)可編輯表格
這篇文章主要介紹了vue中用js如何實現(xiàn)循環(huán)可編輯表格，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇關于Vue中Axios從遠程/后臺讀取數(shù)據(jù)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
Vue.js實現(xiàn)在下拉列表區(qū)域外點擊即可關閉下拉列表的功能(自定義下拉列表)
這篇文章主要介紹了Vue.js實現(xiàn)在下拉列表區(qū)域外點擊即可關閉下拉列表的功能(自定義下拉列表) ,需要的朋友可以參考下2017-05-05
我們在做項目經(jīng)常會遇到多級導航這個需求,所以下面這篇文章主要給大家介紹了關于vue實現(xiàn)四級導航及驗證碼的相關資料,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
導航守衛(wèi)就是路由跳轉過程中的一些鉤子函數(shù)，這個過程中觸發(fā)的這些函數(shù)能讓你有操作一些其他的事兒的時機，這就是導航守衛(wèi)，守衛(wèi)適用于切面編程，即把一件事切成好幾塊，然后分給不同的人去完成，提高工作效率，也可以讓代碼變得更加優(yōu)雅2022-09-09
Vue3使用ResizeObserver監(jiān)聽元素的尺寸寬度變化
要監(jiān)聽 div 寬度的變化,可以使用 ResizeObserver 接口,ResizeObserver 允許你觀察一個或多個元素的尺寸變化,并在發(fā)生變化時執(zhí)行回調函數(shù),所以本文給大家介紹了Vue3如何使用ResizeObserver監(jiān)聽元素的尺寸寬度變化,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個值,文中通過示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對象的值，需要的朋友可以參考下2022-12-12
Vue是一套用于構建用戶界面的漸進式框架,它的核心庫只關注視圖層,易于上手,也便于與其他庫或已有項目整合,下面這篇文章主要給大家介紹了關于如何運行vue項目的相關資料,需要的朋友可以參考下2023-05-05
vue-draggable實現(xiàn)拖拽表單的示例代碼
本文主要介紹了vue-draggable實現(xiàn)拖拽表單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了VUE實時監(jiān)聽元素距離頂部高度的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07