任何有模的計量器，均可化減法為加法運算
阿新 • • 發佈：2022-04-13
Vue 插槽
插槽的基本使用
元件使用slot標籤，顯示元件標籤的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <!-- 不使用插槽寫的aaa不會顯示,使用就會顯示--> <child1>aaa</child1> </div> </body> <script> Vue.component('child1', { template: `<div> 首頁 <slot></slot> </div>`, }) var vm = new Vue({ el: '#box', }) </script> </html>
具名插槽
通過在標籤內使用slot屬性指定值，元件內使用solt標籤通過name接收slot屬性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <!-- 具名插槽，把p標籤給a插槽，div標籤給b插槽--> <navbar> <p slot="a">pppp</p> <div slot="b">bbbb</div> </navbar> </div> </body> <script> Vue.component('navbar', { template: `<div> <slot name="a"></slot> navbar <slot name="b"></slot> </div>`, }) var vm = new Vue({ el: '#box', data:{ } }) </script> </html>
總結
# 1 計算屬性 -computed--->把方法變成屬性---》延緩計算 -在頁面中直接使用函式，頁面只要重新整理，函式就會重新執行，使用計算屬性--》只有當前函式使用的變數發生變化時，才重新運算 # 2 監聽屬性 -watch:屬性----》只要這個變數發生變化，就會執行方法 # 3 元件化開發 -區域性元件:寫在元件內部：Vue.components -全域性元件：Vue.component() -元件有自己的html，css，js，相互不影響 -template 一定要放在一個標籤中 -data必須是函式data(){retrun {} } -各級元件的data資料是不共享的 # 4 元件間通訊 -通過自定義屬性：父傳子---》自定義的屬性寫在自定義的元件上---》props:['自定義屬性名'] -通過自定義事件：子傳父---》子中呼叫this.$emit('自定義事件名',引數，引數)--》觸發寫在定義元件上的 @自定義事件名='函式'---》函式執行(父元件) -ref屬性： 放在普通標籤---》通過this.$refs.屬性值---》原生dom 放在元件上---》通過this.$refs.屬性值---》當前組價物件---》拿到元件中的值，執行元件中的方法 # 5 動態元件 -多個元件切換，通過動態元件的is來決定顯示哪個元件 -keep-alive：元件切換的時候不銷燬 # 6 插槽 -<元件>寫內容</元件>---》如果定義了插槽---》替換到插槽中 -具名插槽---》給插槽名名字---》使用的時候，指定替換哪個插槽的內容