使用vue也有很多年了，一直都沒有整理一下相關知識，給大家總結下開發過程中所遇到的一些坑，主要給大家總結一下vue組件傳值的幾種常用方法：

1、通過路由帶參數傳值

① A組件通過query把id傳給B組件

this.$router.push({path:'/B',query:{id:1}})

② B組件接收

this.$route.query.id

2、父組件向子組件傳值

使用props向子組件傳遞數據

子組件部分：child.vue

• {{item.name}}

export default {

props:['nameList']

}

父組件部分：

這是父組件

import child from './child.vue'

export default {

components:{

child

},

data(){

return{

names:[

{name:'柯南'},

{name:'小蘭'},

{name:'工藤新一'}

]

}

}

}

3、子組件向父組件傳值

子組件主要通過事件向父組件傳遞數據：

子組件部分：

• {{item.name}}

點擊我

export default {

props:['nameList'],

methods:{

toParent(){

this.$emit('emitData',123)

}

}

}

父組件部分：

這是父組件

import child from './child.vue'

export default {

components:{

child

},

data(){

return{

names:[

{name:'柯南'},

{name:'小蘭'},

{name:'工藤新一'}

]

}

},

methods:{

getData(data){

console.log(data); //123

}

}

}

總結

以上所述是小編給大家介紹的Vue 組件傳值幾種常用方法【總結】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

總結

以上是生活随笔為你收集整理的vue方法传值到data_Vue 组件传值几种常用方法【总结】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。