하위 구성 요소가 Vue에서 상위 구성 요소 데이터를 수정하도록 하는 방법

ㅋㅋㅋ • 1. 일반적인 사용 시나리오

...
watch:{
  value(val) {
    console.log(val);
    this.visible = val;
  }
}
...

관련 학습 권장 사항: javascript 비디오 튜토리얼

•2 처음부터 실행하려는 경우

...
watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + '-' + this.lastName;
    },
    immediate: true,
  }
}
...

•3. )

...
watch: {
  obj: {
    handler(newName, oldName) {
    console.log('///')
  },
  immediate: true,
  deep: true,
}
...

2. 하위 구성 요소가 상위 구성 요소 속성을 수정하는 방법 이해

vue2.0+ 이후에는 더 이상 양방향 바인딩을 수행하려면 특별한 처리가 필요합니다. .

[Vue 경고]: 상위 구성 요소가 다시 렌더링될 때마다 값을 덮어쓰므로 prop을 직접 변경하지 마세요. 대신 변경되는 prop의 값을 기반으로 데이터 또는 계산된 속성을 사용하세요. "

•1. 상위 구성 요소에 이벤트를 보내 수정

**在子组件test1中**
<input type="text" v-model="book"/>
<button @click="add">添加</button>
<p v-for="(item, index) of books" :key="index">{{item}}</p>
...
methods: {
  add() {
    // 直接把数据发送给父组件
    this.$emit(&#39;update&#39;, this.book);
    this.book = &#39;&#39;;
  },
},
**在父组件中**
<test1 :books="books" @update="addBook"></test1>
...
addBook(val) {
  this.books = new Array(val)
},

•2. .sync를 사용하여 하위 구성 요소가 상위 구성 요소의 값을 수정하도록 합니다(실제로 위 방법의 간소화된 버전).

**在父组件中,直接在需要传递的属性后面加上.sync**
<test4 :word.sync="word"/>
**在子组件中**
<template>
  <p>
    <h3 id="word">{{word}}</h3>
    <input type="text" v-model="str" />
  </p>
</template>
<script>
export default {
  props: {
    word: {
      type: String,
      default: &#39;&#39;,
    },
  },
  data() {
    return {
      str: &#39;&#39;,
    }
  },
  watch: {
    str(newVal, oldVal) {
      // 在监听你使用update事件来更新word,而在父组件不需要调用该函数
      this.$emit(&#39;update:word&#39;, newVal);
    }
  }
}
</script>

• 3. 하위 구성 요소에서 복사본을 복사합니다.

**子组件中**
export default {
  props: {
    // 已经选中的
    checkModalGroup: {
      type: Array,
      default: [],
      required: false,
    }
  },
  data() {
    return{
      copyCheckModalGroup: this.checkModalGroup, // 选中的
    }
  },
  methods: {
    // 一个一个的选择
    checkAllGroupChange(data) {
      // 把当前的发送给父组件
      this.$emit('updata', data);
    },
  },
  watch: {
    checkModalGroup(newVal, oldVal) {
      this.copyCheckModalGroup = newVal;
    }
  }
}
**父组件中直接更新传递给子组件的数据就可以**
...
// 更新子组件数据
roleCheckUpdata(data) {
  this.roleGroup = data;
},
...

관련 학습 권장 사항:

프로그래밍 비디오

위 내용은 하위 구성 요소가 Vue에서 상위 구성 요소 데이터를 수정하도록 하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!