接著vue組件父與子通訊詳解繼續學習。本文主要為大家詳細介紹了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>
<p id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</p>
<script>
//通过事件的方式传递
// 绑定 -- 触发
Vue.component("parent-component",{
data:function(){
return {
sonMsg:""
}
},
methods:{
//msg参数要拿子传递的值
recvMsg:function(msg){
console.log("父组件接收到子组件的数据"+msg);
this.sonMsg = msg;
}
},
template:`
<p>
<h1>这是父组件</h1>
<p>子组件传来的数据为：{{sonMsg}}</p>
<hr/>
<child-component @customEvent="recvMsg"></child-component>
</p>
`
})
Vue.component("child-component",{
methods:{
sendMsg:function(){
//来触发绑定给子组件的自定义方法
//this.$emit("customEvent");第一个参数触发
//this.$emit("customEvent");第二个参数传值
this.$emit("customEvent","哈哈哈哈");
},
},
template:`
<p>
<h1>这是子组件</h1>
<button @click="sendMsg">senToFather</button>
</p>
`
})
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>
<p id="container">
<p>{{msg}}</p>
<parent-component></parent-component>
</p>
<script>
//创建父组件
Vue.component("parent-component",{
//data属性
data:function(){
return{
sonMsg:""
}
},
methods:{
recvMsg:function(msg){
this.sonMsg = msg
}
},
template:`
<p>
<h1>父组件</h1>
<h4>子组件传递的数据：{{sonMsg}}</h4>
<child-component @customEvent="recvMsg"></child-component>
</p>
`
})
//创建子组件
Vue.component("child-component",{
data:function(){
return {
myInput:""
}
},
methods:{
sendMsg:function(){
this.$emit("customEvent",this.myInput);
}
},
template:`
<p>
<h1>子组件</h1>
<input type="text" v-model="myInput"/>
<button @click="sendMsg">发送</button>
</p>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>相關推薦：
vue元件中v for指令介紹及使用v- for出現警告問題解析
以上是實例詳解vue組件間通訊子與父詳解（二）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
