vue组件传参

1. 父传子：在父组件的子组件标签上绑定传输的变量，在子组件中利用props接收

// 父组件
<template>
 <div class="home">
     <Bread :list='list' />
 </div>
</template>
<script>
import Bread from '../components/Bread'
export default {
   
 components:{
   Bread},
 data(){
   
   return {
   
     list:'哈哈哈'
   }
 }
}
</script>
//子组件	接收到的数据跟data中的数据是一样的用法
<template>
 <div>
     <h2>{
   {
   list}}</h2>
 </div>
</template>
<script>
export default {
   
   props:['list']
}
</script>

2. 子传父：先在父组件的子组件标签上自定义一个事件调用方法

<template>
  <div class="home">
      <Bread :list='list' @arr='arr' />
  </div>
</template>
<script>
import Bread from '../components/Bread'
export default {
   
  components:{
   Bread},
  data(){
   
    return {
   
      list:'父传子'
    }
  },
  methods:{
   
    arr(stg){
   
      this.list = stg
    }
  }
}
</script>

在子组件中通过$emit来传输数据 ，第一个参数为自定义事件的名，第二个数据为要传输的数据

<template>
  <div>
      <h2 @click='arr'>{
   {
   list}}</h2>
  </div>
</template>
<script>
export default {
   
    props:['list'],
    data(){
   
      return {
   
        arrs:'子传父'
      }
    },
    methods:{
   
      arr(){
   
        this.$emit('arr',this.arrs)
      }
    }
}
</script>

3. vuex：先在store中mutations上定义方法，然后在传输方使用store.commit()调用方法传输数据，第一个参数调用方法名，第二个参数为传输的数据

<template>
  <div