插槽和生命週期指令

2021-10-02 15:36:06 字數 3810 閱讀 7887

元素作為承載分發內容的出口。

簡單的說，就是向元件內部傳入資料，在元件內部，使用slot標籤表示傳入到元件中的資料。

普通的資料用prop傳遞，html結構的這種資料用slot傳遞。

""


>


/i>


<


/hello>
hello.vue

"href"


>


<


/slot>


<


/a>
變數 a 需要在 hello 元件外部定義。



}<


/i>


<


/hello>


"a">


<


/i>


<


/hello>


data()


}
父級模板裡的所有內容都是在父級作用域中編譯的；子模板裡的所有內容都是在子作用域中編譯的。



<


/hello>
如果使用 hello 元件時，沒有向元件內傳入資料，那麼元件內部的 slot 的預設值將起作用。

hello.vue



預設值<


/slot>


<


/a>


標題<


/template>


內容腳底<


/template>


<


/hello>
hello.vue

"title"


>


<


/slot>


<


/slot>


"footer"


>


<


/slot>
v-slot 只能新增在 template 上

slot標籤沒有name屬性時，解析的是 v-slot:default

slot內容如果沒有用template和v-slot指定名稱，那麼屬於default

作用域插槽 — 插槽 prop （裡向外傳遞資料）

v-slot 新增在 template 上，如果寫在元件上就變成獨佔插槽了。



default


="slotprops"


>


}<


/template>


<


/hello>
hello.vue



"default" a=


"1" b=


"2">


<


/slot>


<


/div>
把 template 上的 v-slot 放到元件上，表示在元件這一層獲取所有 default 插槽的資料。

"slotprops"


>


}<


/hello>
hello.vue



"1":b=


"2">


<


/slot>


<


/div>
es6 解構賦值的寫法

"">


}<


/hello>
hello.vue



"1":b=


"2">


<


/slot>


<


/div>
解構賦值改名

var


=// b == 1


"">


}<


/hello>
讓 v-slot 後面的插槽名由字串變為js變數。

v-slot:todo中，todo是字串；

v-slot:[abc]中，abc是變數；



[abc]=""


>


任意 }<


/template>


<


/hello>


data()


}
hello.vue

"todo"


:a="1"


>


<


/slot>
跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，即把引數之前的所有內容 (v-slot:) 替換為字元 #。例如 v-slot:header 可以被重寫為 #header：



here might be a page title<


/h1>


<


/template>


<


!--改為--


>


here might be a page title<


/h1>


<


/template>
該縮寫只在其有引數的時候才可用。

改為：
元件頁

預設值
vue例項有乙個完整的生命週期，也就是從開始建立、初始化資料、編譯模板、掛載dom、渲染→更新→渲染、銷毀等一系列過程，我們稱這是vue的生命週期。通俗說就是vue例項從建立到銷毀的過程，就是生命週期。

每乙個元件或者例項都會經歷乙個完整的生命週期，總共分為三個階段：初始化、執行中、銷毀。

鉤子函式：例項在不同階段，自動觸發的事件。

// 建立階段


beforecreate()


,created()


,beforemount()


,mounted()


,// 執行階段


beforeupdate()


,updated()


,// 銷毀階段


beforedestroy()


,destroyed()
用的比較多的是 mounted、created、updated

$nexttick函式的作用是，將某段程式放到任務佇列中，等到mounted函式執行完畢後，該程式會自動觸發。

場景：beforecreate時發起請求，等到mounted時，渲染響應內容。

data()


},beforecreate()


)})//}, 2000)},


mounted()
全域性：

vue.


directive


('focus',}


)
區域性：

使用：



data()


},template:


`        移除指令


`,    directives:


,inserted()


,update()


,componentupdated()


,unbind()


}}
過濾器的作用是，將資料渲染到頁面上時，先將資料處理一下，把處理後的新資料渲染到頁面上。

全域性

}


vue.filter('r', function (value, d) )
區域性

}


new vue(


}})

vue生命週期和react生命週期對比。

生命週期 指的是元件從初始化開始到結束的過程 或者是生命週期是描述元件從開始到結束的過程，每個元件都具有生命週期，都對元件通過生命週期給予的鉤子函式進行管理。鉤子函式指的是系統某些狀態和引數發生改變的時候，系統立馬去通知對應處理的函式叫做所有的生命週期鉤子自動繫結vue的 this 上下文到例項中，...

Vue之生命週期和生命週期鉤子

生命週期 指的是vm例項建立 執行 銷毀期間的各種事件。生命週期鉤子 生命週期事件 生命週期函式。生命週期主要分為三類 1.建立 這些函式均只在建立階段執行一次 beforecreate 此階段vm例項在內存在建立出來 只有預設的生命週期函式和一些預設的事件 但是data和method屬性沒有初始化...

React 生命週期 生命週期方法

生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...