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

1、通過路由帶參數傳值

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

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

  ② B組件接收 

this.$route.query.id

2、父組件向子組件傳值

使用props向子組件傳遞數據

子組件部分：child.vue

<template>  <div>    <ul>      <li v-for='(item,index) in nameList' :key='index'>{{item.name}}</li>    </ul>  </div></template><script>export default {  props:['nameList']}</script>

父組件部分：

<template>  <div>    <div>這是父組件</div>    <child :name-list='names'></child>    </div></template><script>import child from './child.vue'export default {  components:{    child  },  data(){    return{      names:[        {name:'柯南'},        {name:'小蘭'},        {name:'工藤新一'}      ]    }  }}</script>

3、子組件向父組件傳值

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

    子組件部分：

<template>  <div>    <ul>      <li v-for='(item,index) in nameList' :key='index'>{{item.name}}</li>    </ul>    <Button @click='toParent'>點擊我</Button>  </div></template><script>export default {  props:['nameList'],  methods:{    toParent(){      this.$emit('emitData',123)    }  }}</script>

父組件部分：

<template>  <div>    <div>這是父組件</div>    <child :name-list='names' @emitData='getData'></child>    </div></template><script>import child from './child.vue'export default {  components:{    child  },  data(){    return{      names:[        {name:'柯南'},        {name:'小蘭'},        {name:'工藤新一'}      ]    }  },  methods:{    getData(data){      console.log(data); //123    }  }}</script>

總結

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