Vue解決子元件修改父元件props引數不可逆問題

2021-10-02 17:45:15 字數 624 閱讀 9332

直接賦值props裡面資料會導致如下錯誤

解決這個bug有以下兩種方法,

一:使用$emit函式

1、父元件可以使用 props 把資料傳給子元件。

2、子元件可以使用 $emit 觸發父元件的自定義事件

修改後:

父元件

//html

//methods

methods:,

}

子元件

this.$emit("showsubtype",res.data.data)
二:從新定義乙個屬性去接收props引數值

//html

//js

props:

},},data()

}

但這是會發現傳過來的值不會顯示,這是因為data只執行一次,所以需要實時去監聽引數,用watch函式

watch: 

}

vue子元件修改父元件的值

最常用的一種方法,父元件通過v on繫結乙個事件,在事件中修改自己的值,子元件通過 emit觸發該事件 在子元件mobilemessage中 這種方法有個好處就是可以在父元件的事件裡面做一些額外的處理,但是如果單純的賦值,這個有點繁瑣了。父元件通過.sync識別符號表明prop的雙向繫結,sync是...

vue 子元件修改父元件變數問題

昨天遇到乙個這樣的場景,主頁面引用了乙個子頁面,子頁面有個redio選擇,2個選項。預設的,會從父元件傳遞乙個引數給子元件作為預設值,實現預設選中效果,以及用來做反選。開始沒什麼問題,頁面都擺上去了,但是當我點選進行選擇的時候,console控制器丟擲異常了,提示我不能在子元件裡修改父元件傳遞過來的...

vue 子元件修改父元件的值

如何在子元件中修改父元件的值 第一步 首先得保證父元件中有值吧 這是usermanage.vue data 第二步 在父元件中引用子元件import form from usercreate 第三步 父元件中註冊子元件並引用 template export default,data script 第...