最近在用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 ...