vue组件传参问题

在vue项目中会经常遇到组件传参问题，今天就来了解一下父子组件和兄弟组件传参

父组件传值给子组件

*父组件通过 v-bind:参数名='变量名'传值给子组件
*子组件通过props接收

父组件:通过v-bind:参数名='变量名'传值

<template>
    <div>我是home
      <p>{{message}}</p>
      <p>{{number}}</p>
      <child :num="number"></child>//引入的子组件
    </div>
    
</template>
<script>
import {mapState,mapGetters,mapMutations} from 'vuex';
import child from './comp'
export default {
  name: 'home',
  data () {
    return {
      number:0,
      message:'我是父组件',
    }
  },
  components:{
    child
  },
  created(){
  },
  methods:{
  },
}
</script>
<style scoped>

</style>

子组件：通过props接收

<template>
    <div>
       <p>我是子组件</p> 
       <p>我是子组件的{{num}}</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    props:{
        num:Number
    },
}
</script>
<style scoped>

</style>

子组件传值给父组件

子组件：通过$emit发射数据

<template>
    <div>
       <p>我是子组件</p> 
       <p @click="addClick">我是子组件的count {{count}}</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
           count:0 
        }
    },
    methods: {
        addClick(){
            this.count++;
            this.$emit('addClickpar',this.count)//
        }
    },
}
</script>
<style scoped>

</style>

父组件接收数据

<template>
    <div>我是home
      <p>我是父组件的countnum{{countnum}}</p>
      <child :num="number" v-on:addClickpar="addClickpar"></child>//在子组件标签中直接加入这个方法
    </div>
    
</template>
<script>
import {mapState,mapGetters,mapMutations} from 'vuex';
import child from './comp'
export default {
  name: 'home',
  data () {
    return {,
      countnum:0
    }
  },
  components:{
    child
  },
  created(){
      console.log(`this.router`,this.$route)
  },
  methods:{
    addClickpar(count){
      this.countnum = count;
    }
  },
}
</script>
<style scoped>

</style>