在vue中使用setter改寫父子元件傳的值

2022-03-04 10:07:16 字數 894 閱讀 5112

最近在用muse ui的時候碰到乙個問題,簡單來說是這樣的,父子之間傳值,父元件和子元件使用相同的props命名,並且子元件不用emit,而用等號賦值。

最後使用計算屬性的setter函式解決了,記錄下來,供以後開發時參考,相信對其他人也有用。

根據官方文件裡面對於sync的描述,可以使用如下方法進行父子元件的傳值。

1.父元件在呼叫子元件的時候使用sync。

上面的**會被vue處理成下面的形式:

2.子元件在定義的時候使用childtitle和emit。在子元件定義的時候,通過props把childtitle傳進去就可以使用了,然後通過emit來更新childtitle的值。使用emit的語法如下:

this.$emit('update:childtitle', val);
一般情況下,使用上面的方法來進行父子元件互相傳值已經足夠了,但是如果需要加上下面2個條件呢:

父子元件的變數使用相同的命名。

子元件不使用emit,而是使用等號進行更新。

對於問題1,直接用相同的命名即可,沒有任何問題;但是對於問題2,如果用等號更新的話,開發者工具裡面就會報錯:不能改變props裡面的值。

於是我們考慮使用setter來設定乙個中間變數,在修改這個變數的時候順帶使用emit修改父元件傳進來的值。**如下:

// 省略了其他內容

props: ['childtitle'],

computed: ,

set: function(val)

}}

1.vue就是通過這個原理來更新的。

2.可以考慮寫乙個vue庫或者npm庫,把emit響應轉化為等號賦值。

在Vue中使用Sass

sass 是什麼?sass又稱scss,它是css預處理之一。它在css語法的基礎上增加了變數 巢狀 混合巨集 繼承 佔位符等等高階功能。那什麼是css預處理器呢?簡單理解就是,css預處理是一種專門的程式語言,通過該語言進行web頁面設計,然後再編譯成正常的css檔案,以供專案使用。css預處理器...

在vue中使用wowjs

1 安裝依賴 npm install wowjs s 2 main.js中引入 引入animate.css,安裝wowjs之後,直接引入 import animate.css 3 在需要使用wowjs的元件中使用 在標籤上新增動畫的類名 data wow duration 動畫持續時間 data w...

在Vue中使用樣式

一 vue中通過屬性繫結為元素設定class樣式 方式一 直接傳遞乙個陣列,class要用v bind做資料繫結 方式二 三元表示式 方式三 陣列中巢狀物件,提高 的可讀性 方式四 在為 class 使用v bind 繫結物件的時候,物件的屬性是類名,屬性可以帶或者不帶引號都可以 class h2 ...