So lassen Sie untergeordnete Komponenten die Daten der übergeordneten Komponente in Vue ändern

1. Verständnis von Watch in Vue

Wenn wir die Änderung einer Eigenschaft überwachen möchten, verwenden wir Watch, normalerweise wenn die übergeordnete Komponente sie an die untergeordnete Komponente übergibt

• 1. Häufige Nutzungsszenarien

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

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

•2. Wenn Sie es von Anfang an ausführen möchten

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

•3. Tiefenüberwachung (Array, Objekt )

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

2. Verstehen, wie untergeordnete Komponenten die Eigenschaften von übergeordneten Komponenten ändern

Nach vue2.0+ gibt es keine bidirektionale Bindung mehr. Wenn Sie eine bidirektionale Bindung durchführen möchten, ist eine spezielle Verarbeitung erforderlich .

[Vue-Warnung]: Vermeiden Sie die direkte Mutation einer Requisite, da der Wert jedes Mal überschrieben wird, wenn die übergeordnete Komponente erneut gerendert wird. Verwenden Sie stattdessen eine Daten- oder berechnete Eigenschaft basierend auf dem Wert der Requisite, die geändert wurde „

•1. Senden Sie das Ereignis an die übergeordnete Komponente, um es zu ändern

**在子组件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. Verwenden Sie .sync, damit die untergeordnete Komponente den Wert der übergeordneten Komponente ändern kann (eigentlich eine optimierte Version der oben genannten Methode).

**在父组件中,直接在需要传递的属性后面加上.sync**
<test4 :word.sync="word"/>
**在子组件中**
<template>
  <p>
    <h3>{{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. Kopieren Sie eine Kopie in die Unterkomponente

**子组件中**
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;
},
...

Verwandte Lernempfehlungen: Programmiervideo

Das obige ist der detaillierte Inhalt vonSo lassen Sie untergeordnete Komponenten die Daten der übergeordneten Komponente in Vue ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!