Comment laisser les composants enfants modifier les données des composants parents dans Vue

1. Comprendre la montre en vue

Si nous souhaitez surveiller les modifications dans un attribut, nous utilisons watch, généralement lorsqu'un composant parent le transmet à un composant enfant

•1 Scénarios d'utilisation courants

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

Recommandations d'apprentissage associées :

Tutoriel vidéo javascript

•2 Si vous souhaitez l'exécuter depuis le début

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

•3. Surveillance approfondie (tableau, objet)

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

2. Compréhension de la modification des sous-composants des propriétés du composant parentdans vue2.0+ Il n'y a plus de liaison bidirectionnelle. Si vous souhaitez effectuer une liaison bidirectionnelle, un traitement spécial est requis.

[Vue warn] : évitez de muter directement un accessoire car la valeur sera écrasée à chaque nouveau rendu du composant parent, utilisez plutôt une donnée ou une propriété calculée basée sur la valeur de l'accessoire en cours de mutation : "You Prop". Nom de l'attribut modifié "

•1. Envoyez des événements au composant parent pour modifier

**在子组件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. Utilisez .sync pour laisser le composant enfant modifier le parent La valeur du composant (en fait une version simplifiée de la méthode ci-dessus)

**在父组件中,直接在需要传递的属性后面加上.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 Copier une copie dans le sous-composant

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

.

Recommandations d'apprentissage associées :

Vidéos de programmation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!