Vue學習筆記(八) 組件進階
一、插槽
（1）插槽內容javascript
像 HTML 元素同樣，咱們經常須要給組件傳遞內容html
好比在下面的例子中，咱們給自定義組件 prompt-info 傳入 出錯啦 的文本vue
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info>出錯啦</prompt-info>
</div>
<script>
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
可是，結果並不像咱們所想的，出錯啦 的提示信息沒有顯示出來，這時候咱們就可使用 <slot> 解決這個問題java
<slot> 就是插槽，也就是說咱們須要先在組件中留下一個位置，而後才能在使用的時候把傳入的內容放進去webpack
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot></slot>
</div>
`
})
咱們還能夠爲插槽提供默認內容，可是它僅僅會在沒有提供內容的時候顯示出來web
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot>很差意思</slot>
</div>
`
})
在定義好插槽後就能夠正常顯示傳入的內容啦，事實上咱們不只能夠傳入簡單的文本，還能夠傳入任何模板代碼npm
<div id="app">
<prompt-info>
<span>出錯啦</span>
<p>請稍後再試</p>
</prompt-info>
</div>
（2）插槽數據緩存
考慮一個問題，上面咱們傳入的模板代碼中是沒有包含數據的，假如如今咱們使用數據會發生什麼呢？服務器
這裏面還有必定的講究網絡
- 數據在父級模板中定義，在父級模板中使用：例以下面的 msg
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info>{{ msg }}</prompt-info>
</div>
<script>
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot></slot>
</div>
`
})
new Vue({
el: '#app',
data: {
msg: '服務器離家出走啦 T_T'
}
})
</script>
</body>
</html>
- 數據在子模板中定義，在子模板中使用：例以下面的 info
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info></prompt-info>
</div>
<script>
Vue.component('prompt-info', {
data: function () {
return {
info: '很差意思，請從新再試'
}
},
template: `
<div>
<h3>提示信息</h3>
<slot>{{ info }}</slot>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
- 數據在子模板中定義，在父級模板中使用
此次沒有這麼簡單，咱們先來看一份簡單的代碼：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info>{{ info }}</prompt-info>
</div>
<script>
Vue.component('prompt-info', {
data: function () {
return {
info: '很差意思，請從新再試'
}
},
template: `
<div>
<h3>提示信息</h3>
<slot></slot>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
實際上，這份代碼不會被正確編譯，控制檯會輸出錯誤信息：info is not defined
這是由於 父級模板裏的全部內容都是在父級做用域中編譯的，子模板裏的全部內容都是在子做用域中編譯的
若是咱們但願讓插槽內容訪問子組件數據，能夠怎麼作呢？
首先，咱們須要在 <slot> 元素上使用 v-bind 指令綁定數據（綁定在 <slot> 元素上的特性稱爲 插槽 prop）
而後，咱們就能夠在組件上使用 v-slot 指令獲取並使用 插槽 prop
（注意，在這裏使用 v-slot 的語法爲 v-slot='slotProps'）
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info v-slot='slotProps'>{{ slotProps.info }}</prompt-info>
</div>
<script>
Vue.component('prompt-info', {
data: function () {
return {
defaultInfo: '很差意思，請從新再試',
info: '服務器離家出走啦 T_T'
}
},
template: `
<div>
<h3>提示信息</h3>
<slot v-bind:info='info'>{{ defaultInfo }}</slot>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
（3）具名插槽
好，下面咱們再來考慮另外一個問題，當咱們須要使用多個插槽時，應該怎麼對它們進行區分呢？
答案是在定義的時候使用 name 特性爲插槽命名，而後在使用的時候仍是使用 v-slot 指令指定插槽
（注意，在這裏使用 v-slot 的語法爲 v-slot:slotName，與上面的語法並不衝突）
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info>
<template v-slot:header>
<p>服務離家出走啦</p>
</template>
<!-- 沒有使用 v-slot 指令指定的元素默認放在 default 插槽 -->
<template>
<p>請稍後再試</p>
</template>
<template v-slot:footer>
<p>很差意思</p>
</template>
</prompt-info>
</div>
<script>
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot name="header"></slot>
<!-- 沒有使用 name 特性命名的插槽默認帶有名字 default -->
<slot></slot>
<slot name="footer"></slot>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
- 具名插槽的縮寫：
同 v-on 和 v-bind 指令同樣，Vue 也爲 v-slot 指令提供了縮寫
<!-- 完整語法 --> <template v-slot:header>...</template> <!-- 縮寫 --> <template #header>...</template>
- 獨佔默認插槽的縮寫：
當只有一個默認插槽時，咱們能夠直接把 v-slot 用在組件上：
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot></slot>
</div>
`
})
<prompt-info v-slot:default="slotProps"></prompt-info>
可是隻要出現多個插槽，請始終爲全部的插槽使用完整的基於 <template> 的語法：
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
`
})
<prompt-info v-slot:default="slotProps">
<template v-slot:header="slotProps">
<!-- 內容 -->
</template>
<template v-slot:default="slotProps">
<!-- 內容 -->
</template>
<template v-slot:footer="slotProps">
<!-- 內容 -->
</template>
</prompt-info>
二、動態組件 & 異步組件
（1）動態組件
動態組件其實就是動態切換組件，咱們能夠經過 <component> 元素配合 is 特性實現，來看一個簡單的例子
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button v-for="tab in tabs" v-on:click="currentTab = tab">{{ tab }}</button>
<component v-bind:is="currentTabComponent"></component>
</div>
<script>
Vue.component('tab-home', {
template: '<div>Home component</div>'
})
Vue.component('tab-post', {
template: '<div>Posts component</div>'
})
Vue.component('tab-archive', {
template: '<div>Archive component</div>'
})
new Vue({
el: '#app',
data: {
currentTab: 'Home',
tabs: ['Home', 'Post', 'Archive']
},
computed: {
currentTabComponent: function () {
return 'tab-' + this.currentTab.toLowerCase()
}
}
})
</script>
</body>
</html>
當每次切換組件時，Vue 都會建立一個 currentTabComponent 實例
可是，有的時候咱們卻但願可以保持組件的狀態，以免反覆重渲染致使的性能問題
這時候咱們能夠經過 <keep-alive> 元素實現，包裹在該元素內的組件在第一次建立時會被緩存起來
<keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
（2）異步組件
異步組件其實就是異步加載組件，咱們能夠經過工廠函數定義組件，一個簡單的例子以下
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>Hello</p>
<my-component></my-component>
</div>
<script>
Vue.component('my-component', function (resolve, reject) {
// 這裏使用 timeout 函數是爲了模擬網絡延時狀況
setTimeout(function () {
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
咱們還能夠在工廠函數中返回 Promise 對象，把 webpack 和 ES2015 語法結合在一塊兒使用
Vue.component('my-component', () => import('./async-component'))
三、邊界狀況
（1）訪問元素
絕大多數狀況下，咱們不該該觸及另外一個組件實例內部或手動操做 DOM 元素，可是也的確存在這樣的狀況
- 訪問父級組件實例
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: `<h3>{{ this.$parent.msg }}</h3>`
})
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
</script>
</body>
</html>
- 訪問子組件實例
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button v-on:click="showMsg()">打印信息</button>
<my-component ref="page"></my-component>
</div>
<script>
Vue.component('my-component', {
template: `<p>Hello World</p>`
})
new Vue({
el: '#app',
methods: {
showMsg: function () {
console.log(this.$refs.page)
}
}
})
</script>
</body>
</html>
- 訪問子元素
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button v-on:click="changeText()">改變文本</button>
<p ref="page">Hello World</p>
</div>
<script>
new Vue({
el: '#app',
methods: {
changeText: function () {
this.$refs.page.innerHTML = 'Hello Vue'
}
}
})
</script>
</body>
</html>
- 依賴注入
使用 provide 選項指定提供什麼數據給後代，而後在任何後代組件中均可以使用 inject 選項接收數據
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
inject: ['msg','toLower'],
template: `<p>{{ toLower(msg) }}</p>`
})
new Vue({
el: '#app',
data: {
msg: 'HELLO'
},
methods: {
toLower: function (msg) {
return msg.toLowerCase()
}
},
provide: function () {
return {
msg: this.msg,
toLower: this.toLower
}
}
})
</script>
</body>
</html>
【 閱讀更多 Vue 系列文章，請看 Vue學習筆記 】
相關文章
- 1. OpenCV3學習筆記core組件進階
- 2. Vue—— 組件進階
- 3. 高階組件學習筆記（二）
- 4. python進階學習筆記
- 5. Redis學習筆記-進階
- 6. Carsim進階學習筆記
- 7. vim進階學習筆記
- 8. vue2.0學習筆記（七）：深入理解Vue中的組件（2）--進階篇
- 9. Vue-進階學習
- 10. vue進階學習
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. OpenCV3學習筆記core組件進階
- 2. Vue—— 組件進階
- 3. 高階組件學習筆記（二）
- 4. python進階學習筆記
- 5. Redis學習筆記-進階
- 6. Carsim進階學習筆記
- 7. vim進階學習筆記
- 8. vue2.0學習筆記（七）：深入理解Vue中的組件（2）--進階篇
- 9. Vue-進階學習
- 10. vue進階學習