溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
接著vue組件父與子通信詳解繼續學習。
二、組件間通信（子組件傳值給父組件）
通過事件的方式來完成數據的傳輸。
①在父組件中 定義一個方法，用來接收子組件所通過事件傳來的值
methods:{
recvMsg:function(msg){
//參數msg就是子組件通過事件出來的數據
}
}
②綁定事件處理函數
事件一般情況 都是自定義事件
<child-component @myEvent="recvMsg"></child-component>
③在子組件觸發事件
事件名，值
this.$emit('myEvent',myPhone)
//觸發一個叫做myEvent的事件，同時把第二個參數數據傳遞給事件對應的處理函數
總結：
在Vue 中，父子組件的關系可以總結為 props down, events up。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。
<!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>
//通過事件的方式傳遞
// 綁定 -- 觸發
Vue.component("parent-component",{
data:function(){
return {
sonMsg:""
}
},
methods:{
//msg參數要拿子傳遞的值
recvMsg:function(msg){
console.log("父組件接收到子組件的數據"+msg);
this.sonMsg = msg;
}
},
template:`
<div>
<h2>這是父組件</h2>
<p>子組件傳來的數據為：{{sonMsg}}</p>
<hr/>
<child-component @customEvent="recvMsg"></child-component>
</div>
`
})
Vue.component("child-component",{
methods:{
sendMsg:function(){
//來觸發綁定給子組件的自定義方法
//this.$emit("customEvent");第一個參數觸發
//this.$emit("customEvent");第二個參數傳值
this.$emit("customEvent","哈哈哈哈");
},
},
template:`
<div>
<h2>這是子組件</h2>
<button @click="sendMsg">senToFather</button>
</div>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
在子組件中放上一個input，點擊按鈕 把用戶輸入的內容發給父組件
<!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>
//創建父組件
Vue.component("parent-component",{
//data屬性
data:function(){
return{
sonMsg:""
}
},
methods:{
recvMsg:function(msg){
this.sonMsg = msg
}
},
template:`
<div>
<h2>父組件</h2>
<h5>子組件傳遞的數據：{{sonMsg}}</h5>
<child-component @customEvent="recvMsg"></child-component>
</div>
`
})
//創建子組件
Vue.component("child-component",{
data:function(){
return {
myInput:""
}
},
methods:{
sendMsg:function(){
this.$emit("customEvent",this.myInput);
}
},
template:`
<div>
<h2>子組件</h2>
<input type="text" v-model="myInput"/>
<button @click="sendMsg">發送</button>
</div>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
