vue父子组件传值方法(案例)

首先创建三个.vue文件：Father.vue(父组件)、Son1.vue(子组件1)、Son2.vue(子组件2)。

目的：实现父组件同时向子组件1，子组件2传值 ；实现子组件1同时向父组件，子组件2传值

1.Father.vue代码如下

<template>
  <div>
      <h3>Father</h3>
      这是父组件：<input type="text" v-model="fu" >
      <div>父：{{fu}}</div>
      <div>获取的son1：{{ziTOfu}}</div>
      <hr> <!-- 为了更清楚展示，使用hr标签进行分割 -->
      <Son1 :fathreToSon1='fu' @get='getdate'></Son1>
      <hr>
      <Son2 :fathreToSon2='fu' :son1Toson2='ziTOfu'></Son2>
  </div>
</template>

<script>
import Son1 from './Son1.vue'
import Son2 from './Son2.vue'
export default {
    data(){
        return{
            fu:'',
            ziTOfu:''
        }
    },
    components:{
        Son1,Son2
    },
    methods:{
        getdate(val){
            this.ziTOfu = val
        }
    }
}
</script>

2.Son1.vue代码如下

<template>
  <div>
      <h3>son1</h3>
      Son1输入框：<input type="text" v-model="zi">
      <div>son1接收父：{{fathreToSon1}}</div>
      <div>Son1：{{zi}}</div>
  </div>
</template>

<script>
export default {
    props:{
        fathreToSon1:String
    },
    data(){
        return{
            zi:''
        }
    },
    watch:{
        zi(val){
            this.$emit('get',val)
        }
    }
}
</script>

<style>

</style>

3.Son2.vue代码如下

<template>
  <div>
      <h3>son2</h3>
      Son2输入框：<input type="text">
      <div>son2接收父：{{fathreToSon2}}</div>
      <div>son2接收son1：{{son1Toson2}}</div>
  </div>
</template>

<script>
export default {
    props:{
        fathreToSon2:String,
        son1Toson2:String
    }
}
</script>

实现结果

1.在父组件输入框中输入数据，子组件中会显示父组件传过来的数值

 2.在子组件1输入框中输入数据，父组件与子组件2中会显示子组件1传过来的值