vue父子组件互相传值

最新推荐文章于 2025-04-17 19:22:45 发布

ZOEylchen

最新推荐文章于 2025-04-17 19:22:45 发布

阅读量461

点赞数 1

分类专栏： js vue 文章标签： vue

本文链接：https://blog.csdn.net/ZOEylchen/article/details/116503792

版权

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文详细介绍了四种在Vue组件间动态传递值的方法：v-bind、.sync、v-model和使用watch配合computed。通过实例演示了如何在父组件改变时更新子组件，并展示了不同方式的适用场景和代码实现。

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

子组件动态修改父组件值

第一种：父组件用 :变量名="" @方法
第二种: .inputName.sync方法
第三种：在自定义组件上用v-model
第四种：上面都是用的watch，实际也可以使用computed来操作，也就是前3种都可以配合computed组合成6种

第一种：父组件用 :变量名="" @方法

父组件传递值给子组件

用 v-bind:inputName传递一个值

  <date-pick :inputName="item.label" @changeInputName="changeName($event,item)"></date-pick> 
  //这里传item是因为传item，然后修改里面的属性可以有一个动态的数据修改。自己把握

父组件中定义changeName方法

changeName (val, item) {
      item.label = val
}

子组件获取父组件的值

 props: ['inputName']

子组件在data上定义数据 fatherInputName

注意这里fatherInputName要用从Props里的数据来初始化

  data () {
    return {
      fatherInputName: this.inputName
      }
  }

在子组件中监听fatherInputName的改变

 watch: {
    fatherInputName (nval) {
      this.$emit('changeInputName', nval) // 这里和父组件上的@changeInputName保持一致啊，默认的第一个参数一定是$event
    }
  }

第二种: .inputName.sync方法

父组件传递给子组件用sync

  <date-pick :inputName.sync="item.label"></date-pick>

子组件获取也是用props

props: ['inputName'],

一样用data定义个参数 fatherInputName

 fatherInputName: this.inputName,

监听参数fatherInputName

  watch: {
    fatherInputName (nval) {
      this.$emit('update:inputName', nval)
    }
  },

第三种：在自定义组件上用v-model

     <date-pick v-model="item.label"></date-pick>

在子组件Props中用value接收，input发送事件

props: {
    value: {
      type: String
    }
  }

子组件中定义自己的数据 data

fatherInputName: this.value,

子组件利用watch监听子组件中表单v-model改变，从而发给父组件让父组件发生改变

 watch: {
    fatherInputName(nval){
      this.$emit("input",nval)
    }
  },

子组件的template用刚刚定义的fatherInputName

          <el-input v-model="fatherInputName"></el-input>

第四种：上面都是用的watch，实际也可以使用computed来操作，也就是前3种都可以配合computed组合成6种

父组件传值给子组件

    <date-pick :inputName="item.label" @changeInputName="changeName($event,item)"></date-pick>

子组件用props接受值

props: ['inputName'],

子组件template ， v-model的是computed的数据

 <el-input v-model="fname"></el-input>

子组件中定义数据

data () {
    return {
      fatherInputName: this.inputName,
      // 控住设置时段的显示与隐藏
      dialogVisible: false,
      }
 }

子组件中用computed去改变值

 computed:{
    fname: {
      set: function (nval) {
        this.$emit('changeInputName', nval)
        this.fatherInputName = nval
      },
      get: function () {
        return this.fatherInputName
      }
    }
  },