vue父子组件之间的数据传递

1.父组件向子组件共享数据
父组件向子组件共享数据需要使用props自定义属性。示例代码如下：

// 父组件
<Left :msg="message" :userinfo="user"></Left>
<script>
import Left from '@/components/Left.vue'
export default {
    
    
    data(){
    
    
      return{
    
    
        message:'hello',
        user:'flyer',
      }
    },
    components:{
    
    
      Left,
    }
}
</script>

// 子组件
<template>
  <div>
    <p>父组件传递过来的msg值{
    
    {
    
    msg}}</p>
    <p>父组件传递过来的user值{
    
    {
    
    userinfo}}</p>
  </div>
</template>

<script>
export default {
    
    
  props:['msg','userinfo']
}
</script>

2.子组件向父组件共享数据
子组件向父组件共享数据使用$emit自定义事件。示例代码如下：

//子组件
<template>
  <div>
    <p>{
    
    {
    
    count}}</p>
    <button @click="add">+1</button>
  </div>
</template>
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      count:0
    }
  },
  methods:{
    
    
    add(){
    
    
      this.count += 1;
      this.$emit('numchange',this.count);
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <h1>app组件</h1>
    <p>{
    
    {
    
    countFromSon}}</p>
    <hr>
    <Right @numchange="getNewCount"></Right>
  </div>
</template>
<script>
import Right from '@/components/Right.vue'

export default {
    
    
    data(){
    
    
      return{
    
    
        countFromSon:0
      }
    },
    methods:{
    
    
      getNewCount(val){
    
    
        this.countFromSon = val;
      }
    },
    components:{
    
    
      Right
    }
}
</script>