溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue子組件向父組件傳值的方法是什么的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue子組件向父組件傳值的方法是什么文章都會有所收獲，下面我們一起來看看吧。
子組件：通過某種事件（這里是@click點擊事件，也可以是其他事件）發送數據，this.$emit('事件名',要傳的數據)
父組件：在標簽內部@子組件中定義的事件名，等于一個函數（這里是rev），通過rev（val）這個函數接收數據，把val賦值給自己的數據
初始化Vue實例，可以理解為父組件，在父組件中的data中初始化一個變量（parentmsg），用來接收值；
let vm = new Vue({
el: '#app',
data: {
parentmsg:''
}
});自定義子組件，命名為Child，這個名字可以隨意起，template里直接給一個id名，可以直接在html中寫組件的內容，不再需要使用模板字符串寫模板了，既方便又快捷;
在子組件的data函數里聲明一個變量（childmsg）；
在子組件中寫一個點擊事件@click="send（）"，send函數內部通過this.$emitthis.$emit（'childsend',this.childmsg）向父組件發送數據；this.$emit的第一個參數為事件名，自定義的，父組件需要通過這個事件名接收值；第二個參數為要傳給父組件的數據；
Vue.component('Child',{
template:'#tp',
data() {
return {
childmsg:'這是子組件中的數據'
}
},
methods: {
send() {
// 第一個參數為事件名，自定義的，父組件需要通過這個事件名接收值
// 第二個參數為要傳給父組件的數據
this.$emit('childsend',this.childmsg)
}
}
})<!-- 子組件模板內容 --> <template id="tp"> <div> <button @click="send">點我向父組件傳值</button> </div> </template>
在父組件中，通過@子組件中定義的事件名，觸發一個函數rev（val）來接收數據，把接收到的val值賦給自己的變量parentmsg，然后就可以在html中使用插值表達式或v-bind綁定屬性值來使用子組件發送的數據了。
<div id="app">
<Child @childsend="rev"></Child>
<h4>{{parentmsg}}</h4>
</div>
methods: {
// 父組件接收數據的函數
rev(val) {
// val就是子組件發送的數據
this.parentmsg = val
}
}<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>子向父傳值</title>
</head>
<body>
<!-- 父組件 @childsend="rev" -->
<div id="app">
<Child @childsend="rev"></Child>
<h4>{{parentmsg}}</h4>
</div>
<!-- 子組件 this.$emit('childsend',this.childmsg) -->
<template id="tp">
<div>
<button @click="send">點我向父組件傳值</button>
</div>
</template>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
// 自定義子組件
Vue.component('Child',{
template:'#tp',
data() {
return {
childmsg:'這是子組件中的數據'
}
},
methods: {
send() {
// 第一個參數為事件名，自定義的，父組件需要通過這個事件名接收值
// 第二個參數為要傳給父組件的數據
this.$emit('childsend',this.childmsg)
}
}
})
let vm = new Vue({
el: '#app',
data: {
parentmsg:''
},
methods: {
// 父組件接收數據的函數
rev(val) {
// val就是子組件發送的數據
this.parentmsg = val
}
}
});
</script>
</body>
</html>
點擊之后父組件才能訪問子組件中的數據
關于“Vue子組件向父組件傳值的方法是什么”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue子組件向父組件傳值的方法是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
