最近在學習vue的源碼，總結了幾種vue中父子組件傳遞數據的方法。

父組件向子組件傳遞props數據，子組件通過觸發事件向父組件回傳數據，代碼如下：

//子組件 <template> <div @click='changeName(’YYY’)'>{{name}}</div></template><script>export default{ props:[’name’],//or props:{name:{type:String,default:’’}} methods:{//不能在子組件修改props數據，應觸發事件讓父組件處理changeName(newName){ this.$emit(’changeName’,newName)} }}</script> //父組件<template> <div><child-comp :name='name' @changeName='changeName'></child-comp> </div></template><script> import childComp from ’path’ export default{data(){ return {name:’XXX’}},components:{ childComp},methods:{ changeName(newName){this.name = newName; }} }</scritp>

以上就是一個完整的流程，父組件通過props將數據傳遞給子組件，子組件則觸發事件，由父組件監聽，并做相應處理。

ref屬性可定義在子組件或原生DOM上，如果在子組件上，則指向子組件實例，如果在原生DOM上，則指向原生DOM元素（可以用做元素選擇，省去querySelector的煩惱）。

傳遞數據的思路：在父組件內通過ref獲取子組件實例，然后調用子組件方法，并傳遞相關數據作為參數。代碼如下：

//子組件 <template> <div>{{parentMsg}}</div></template><script>export default{ data(){return { parentMsg:’’} }, methods:{getMsg(msg){ this.parentMsg = msg;} }}</script> //父組件<template> <div><child-comp ref='child'></child-comp><button @click='sendMsg'>SEND MESSAGE</button> </div></template><script> import childComp from ’path’ export default{components:{ childComp},methods:{ sendMsg(){this.$refs.child.getMsg(’Parent Message’); }} }</scritp>3.provide & inject 官方不推薦在生產環境使用

provide意為提供，當一個組件通過provide提供了一個數據，那么它的子孫組件就可以使用inject接受注入，從而可以使用祖先組件傳遞過來的數據。代碼如下：

//child<template> <div>{{appName}}</div></template><script>export default{ inject:[’appName’]}</script> // root export default{ data(){return { appName:’Test’} }, provide:[’appName’]}4.vuex

vue官方推薦的全局狀態管理插件。不細說。

到此這篇關于Vue中父組件向子組件傳遞數據的幾種方法的文章就介紹到這了,更多相關Vue 父組件向子組件傳遞數據內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！