关于v-model以及父子间值同步的使用

最新推荐文章于 2025-01-07 23:39:10 发布

骚年008

最新推荐文章于 2025-01-07 23:39:10 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_36245035/article/details/101469077

本文详细介绍了一个使用Vue.js实现的父子组件通信案例，包括父组件如何通过事件监听接收子组件传递的数据，以及子组件如何利用props从父组件获取并更新状态。这种双向通信机制是Vue组件间交互的核心。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<template>
    <div id="fat">
        <input type="text" v-model="fatherValue" />
        <!--子传父事件，父传子props-->
        <son @fatAct="sonAct" :fatVal="fatherValue"></son>
    </div>
</template>
<script>
//  引入子组件
import Son from './Son'
export default {
  components:{
    Son
  },
  data(){
    return {
      fatherValue:''
    }
  },
  methods:{
    fatAct: function (childValue) {
        // childValue就是子组件传过来的值
        this.fatherValue = childValue
      }
  }
}
</script>
<style></style>

子组件

<template>
    <div id="son">
        <input type="text" v-model="sonValue" />
    </div>
</template>
<script>
export default {
  props:{
    fatherValue:{
      type:String,
      default:function(){
        return ''
      }
    }
  },
  computed:{
    sonValue:{
      get:function(){
        return this.fatherValue
      },
      set:function(value){
        this.$emit("sonAct",value);
      }
    }
  }
};
</script>
<style></style>