How to let child components modify parent component data in Vue

##1. Understanding watch in vue

If we want to monitor changes in an attribute, we use watch, usually when a parent component passes it to a child component

•1. Common usage scenarios

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

Related learning recommendations:

javascript video tutorial

•2. If you want to execute it from the beginning

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

•3. Deep monitoring (array, object)

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

2. Understanding how to modify the properties of parent components in sub-components

After vue2.0 It is no longer a two-way binding. If you want to perform two-way binding, special processing is required.

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "You Modified attribute name"

•1. Send the event to the parent component to modify

**在子组件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. Use .sync to let the child component modify the parent The value of the component (actually a simplified version of the above method)

**在父组件中,直接在需要传递的属性后面加上.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. Copy a copy in the subcomponent

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

Related Learning recommendations:

Programming Video

The above is the detailed content of How to let child components modify parent component data in Vue. For more information, please follow other related articles on the PHP Chinese website!