Vue父組件和子組件之間數(shù)據(jù)傳遞和方法調(diào)用
更新時(shí)間：2022年12月14日 16:24:35 投稿：yin
vue組件在通信中，無(wú)論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個(gè)共同點(diǎn)就是有中間介質(zhì)，子向父的介質(zhì)是自定義事件，父向子的介質(zhì)是props中的屬性。
vue組件在通信中，無(wú)論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個(gè)共同點(diǎn)就是有中間介質(zhì)，子向父的介質(zhì)是自定義事件，父向子的介質(zhì)是props中的屬性。
父組件向子組件傳值(子組件主動(dòng)獲取父組件的數(shù)據(jù)和方法)
父組件import引用子組件 使用子組件時(shí)在子組件上添加一個(gè)v-bind屬性，并綁定上數(shù)據(jù) 在子組件中創(chuàng)建 props ，在props 中創(chuàng)建相同的屬性名，用來(lái)接收數(shù)據(jù) 把接收到的數(shù)據(jù)在子組件中使用
子組件向父組件傳值(父組件主動(dòng)獲取子組件的數(shù)據(jù)和方法)
子組件中需要發(fā)出該自定義事件，可以是按鈕的點(diǎn)擊事件，也可以是其他方式 將需要傳的值放在 $emit 第二個(gè)參數(shù)的位置，這個(gè)參數(shù)會(huì)被傳給父組件中的響應(yīng)方法 需要在父組件中使用子組件并在子組件標(biāo)簽上綁定對(duì)事件的監(jiān)聽(tīng)
演示代碼：
//父組件
<template>
<div id="header">
<headerchild ref="headerChild"></headerchild>
<button @click="getChild()">父組件獲取子組件的數(shù)據(jù)和方法</button>
</div>
</template>
<script>
import HeaderChild from './HeaderChild'
export default {
data () {
return {
title:'我是父組件的數(shù)據(jù)'
}
},
methods: {
getChild (){
console.log(this.$refs.headerChild.name)
},
run (){
console.log("我是父組件里面的方法")
}
},
components: {
'headerchild': HeaderChild
}
}
</script>
<style lang="sass" scoped>
</style>//子組件
<template>
<div id="headerchild">
<button @click="getParent()">獲取父組件的數(shù)據(jù)和方法</button>
</div>
</template>
<script>
export default {
data () {
return {
name:'我是子組件里面的數(shù)據(jù)'
}
},
methods:{
getParent(){
console.log(this.$parent.title) /*獲取整個(gè)父組件*/
this.$parent.run()/*獲取父組件的方法*/
}
},
props:['title','run','home'] /*通過(guò)props接收父組件傳遞過(guò)來(lái)的數(shù)據(jù) */
}
</script>
到此這篇關(guān)于Vue父組件和子組件之間數(shù)據(jù)傳遞和方法調(diào)用的文章就介紹到這了,更多相關(guān)Vue父組件和子組件互相傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何優(yōu)雅的在一臺(tái)vps（云主機(jī)）上面部署vue+mongodb+express項(xiàng)目
這篇文章主要介紹了如何優(yōu)雅的在一臺(tái)vps（云主機(jī)）上面部署vue+mongodb+express項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
hooks可以通過(guò)特定的函數(shù)將邏輯 "鉤入" 組件中,使得開(kāi)發(fā)者能夠更靈活地構(gòu)建和管理組件的功能從而提高代碼的可讀性以及可維護(hù)性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實(shí)際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下2023-09-09
Pinia 的 Setup Stores 語(yǔ)法使用實(shí)例詳解
這篇文章主要為大家介紹了Pinia 的 Setup Stores 語(yǔ)法使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue項(xiàng)目使用CDN優(yōu)化首屏加載問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目使用CDN優(yōu)化首屏加載問(wèn)題,本文以vue、vuex、vue-touter為例，給大家介紹處理流程，需要的朋友可以參考下2018-04-04
Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Vue3獲取DOM節(jié)點(diǎn)的3種方式實(shí)例
Vue本來(lái)無(wú)需操作DOM來(lái)更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點(diǎn)的3種方式,需要的朋友可以參考下2023-02-02
vue3中使用reactive定義的變量響應(yīng)式丟失問(wèn)題解決方案
這篇文章主要介紹了vue3中使用reactive定義的變量響應(yīng)式丟失問(wèn)題的具體例子和解決方案,文章通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
詳解如何在vue項(xiàng)目中引入elementUI組件
這篇文章主要介紹了詳解如何在vue項(xiàng)目中引入elementUI組件,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
在Vue3中,ref提供了訪(fǎng)問(wèn)組件內(nèi)DOM元素和子組件實(shí)例的方法,防抖是一種限制函數(shù)調(diào)用頻率的方法,即在一定時(shí)間內(nèi)多次觸發(fā)同一個(gè)函數(shù),只執(zhí)行最后一次觸發(fā)的函數(shù),本文將給大家介紹了Vue3如何利用自定義ref實(shí)現(xiàn)防抖,需要的朋友可以參考下2024-05-05
本篇文章主要介紹了基于vue.js 2.x的虛擬滾動(dòng)條的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01