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

本文主要是介绍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>

这篇关于vue父子组件之间的数据传递的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！