當(dāng)我們直接改變父組件的 props 值是會(huì)報(bào)以下警告：

[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: “facomment”

會(huì)報(bào)錯(cuò)的原因是由于 Vue 的單項(xiàng)數(shù)據(jù)流。

怎樣理解 Vue 的單項(xiàng)數(shù)據(jù)流？

• 數(shù)據(jù)總是從父組件傳到子組件，子組件沒有權(quán)利修改父組件傳過來的數(shù)據(jù)，只能請求父組件對(duì)原始數(shù)據(jù)進(jìn)行修改。這樣會(huì)防止從子組件意外改變父組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。
• 注意： 在子組件直接用 v-model 綁定父組件傳過來的 props 這樣是不規(guī)范的寫法，開發(fā)環(huán)境會(huì)報(bào)警告。
• 如果實(shí)在要改變父組件的 props 值可以再data里面定義一個(gè)變量，并用 prop 的值初始化它，之后用$emit 通知父組件去修改。

解決方案：

父組件：

<template><div><BlogComment :facomment="comment" @recordsChange="recordsChange"/></div> </template><script> export default {name: "BlogDetail",components: {BlogComment},data(){return {comment: {},}},methods: {recordsChange(records) {this.comment = records; //在父組件修改值},} }; </script>

子組件：

<template><div><div class="pagination-box" v-if="facomment.records != null"><el-paginationbackgroundlayout="prev, pager, next":current-page="facomment.current":page-size="facomment.size":total="facomment.total"@current-change="page1"></el-pagination></div></div> </template><script> export default {name: "",props: ["facomment"],methods: {// 分頁page1(page) {this.$axios.get("/comment/list", {params: {blogId: this.blogId,page: page,pageSize: this.pageSize,},}).then((res) => {// this.facomment = res.data.data (不能直接修改)this.$emit("recordsChange", res.data.data); // 用 $emit 通知父組件去修改});},} }; </script>

總結(jié)

以上是生活随笔為你收集整理的【Vue】报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。