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

2022-01-12 19:38:47 字數 482 閱讀 6878

昨天遇到乙個這樣的場景, 主頁面引用了乙個子頁面,子頁面有個redio選擇,2個選項。

預設的,會從父元件傳遞乙個引數給子元件作為預設值,實現預設選中效果,以及用來做反選。

開始沒什麼問題,頁面都擺上去了,但是當我點選進行選擇的時候,console控制器丟擲異常了,提示我不能在子元件裡修改父元件傳遞過來的值。

網上查證了一番,原因是父元件往子元件傳值預設是單向繫結的,不允許在子元件修改值。

網上有些答案, 不過有點坑,最後還是問的公司的前端解決了,做法是這樣的:

在子元件定義watch方法,監聽父元件傳遞的變數的值,然後把值賦值給子元件內部自己定義的變數即可,如圖:

watch裡面的事件名稱即父元件傳遞的變數名,引數val是變數的值,具體用法如圖所示。

這樣就很好的解決了子元件會修改父元件值的問題。

vue子元件修改父元件的值

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

vue 子元件修改父元件的值

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

vue裡面父元件如何修改子元件樣式

一去掉 scoped 二混用本地和全域性樣式 三使用深度作用選擇器 在使用 vue 的開發中,我們有時會引用外部元件,包括 ui 元件 elementui iview 當 全域性樣式 style scoped 本地樣式 style 我們把 需要修改子元件的樣式 寫在上面那個全域性樣式裡面 三 使用深...