vue父组件传子组件数值，子组件值没有变

最新推荐文章于 2024-08-16 15:47:15 发布

hua_ban_yu

最新推荐文章于 2024-08-16 15:47:15 发布

阅读量3.9k

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/hua_ban_yu/article/details/119456520

版权

前端同时被 2 个专栏收录

73 篇文章 6 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

在Vue开发中，当数据从祖父组件传递到隔了一个父组件的孙子组件时，由于直接修改值的限制，可能会导致数据不更新。解决方法是在孙子组件中使用watch监听input值的变化，确保祖父组件更新内容后，孙子组件的内容能正确同步。通过监听inputVal并在其变化时更新内部的val，实现了数据的双向绑定。

摘要由CSDN通过智能技术生成

在使用vue开发项目时遇到一个这样的问题，由于项目多成封装，数据是从祖父组件传给孙子组件，中间隔了一个父组件，由于孙子组件不能直接修改值，所以定义了一个变量，从而导致祖父组件更新内容后，孙子组件内容没有发生变化。如图

解决方法：在孙子组件中watch监听input输入变更的值

祖父组件

  <search-choose 
       :filterObj="secondFilterArr[i]" 
        v-if="secondFilterArr.length>0"
        @changeSearchCont="changeSearchCont"
  ></search-choose>

父组件

 <choose-input
        :title="'标题'"
        :src="requireImg[0]"
        :placeholder="'请输入标题'"
        :inputVal="filterObj.title"
        :inputKey="'title'"
        @changeInput="changeInput"
      ></choose-input>

  props: {
    filterObj: {
      type: Object,
      default: {}
    }
  },

子组件

 <input type="text" class="c-input" :placeholder="placeholder" 
      v-model="val" @input="changeInput($event)">

export default {
  props: {
    src: {
      type: String,
      default: require('../../assets/choose/time.png'),
    },
    title: {
      type: String,
      default: '标题'
    },
    inputVal: {
      type: String,
      default: null
    },
    placeholder:{
      type: String,
      default: '请输入'
    },
    inputKey:{
      type: String,
      default: null
    }
  },
  data(){
    return {
      val: this.inputVal
    }
  },
  methods: {
    changeInput(event){
      this.$emit('changeInput', {val: this.val, inputKey: this.inputKey})
    }
  }, 
  watch:{   // 使用监听的方式，监听数据的变化
    inputVal(val){
      this.val = val;
    }
  }
}
</script>