vue中讓子組件修改父組件數(shù)據(jù)的方法

一、關于vue中watch的認識

我們要監(jiān)聽一個屬性的的變化就使用watch一般是父組件傳遞給子組件的時候

?1、常見的使用場景

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

相關學習推薦：javascript視頻教程

?2、如果要一開始就執(zhí)行

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

?3、深度監(jiān)聽(數(shù)組、對象)

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

二、關于子組件修改父組件屬性認識

在vue2.0+ 后不再是雙向綁定,如果要進行雙向綁定需要特殊處理。

[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: "你修改的屬性名"

?1、通過事件發(fā)送給父組件來修改

**在子組件test1中** <input type="text" v-model="book"/> <button @click="add">添加</button> <p v-for="(item, index) of books" :key="index">{{item}}</p> ... methods: {   add() {     // 直接把數(shù)據(jù)發(fā)送給父組件     this.$emit('update', this.book);     this.book = '';   }, }, **在父組件中** <test1 :books="books" @update="addBook"></test1> ... addBook(val) {   this.books = new Array(val) },

?2、使用.sync 來讓子組件修改父組件的值(其實是上面方法的精簡版)

**在父組件中,直接在需要傳遞的屬性后面加上.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: '',     },   },   data() {     return {       str: '',     }   },   watch: {     str(newVal, oldVal) {       // 在監(jiān)聽你使用update事件來更新word,而在父組件不需要調用該函數(shù)       this.$emit('update:word', newVal);     }   } } </script>

?3、在子組件中拷貝一份副本

**子組件中** export default {   props: {     // 已經(jīng)選中的     checkModalGroup: {       type: Array,       default: [],       required: false,     }   },   data() {     return{       copyCheckModalGroup: this.checkModalGroup, // 選中的     }   },   methods: {     // 一個一個的選擇     checkAllGroupChange(data) {       // 把當前的發(fā)送給父組件       this.$emit('updata', data);     },   },   watch: {     checkModalGroup(newVal, oldVal) {       this.copyCheckModalGroup = newVal;     }   } } **父組件中直接更新傳遞給子組件的數(shù)據(jù)就可以** ... // 更新子組件數(shù)據(jù) roleCheckUpdata(data) {   this.roleGroup = data; }, ...

相關學習推薦：編程視頻