1 作用域插槽
含義
作用域插槽就是父組件在調用子組件的時候給子組件傳了一個插槽，這個插槽爲作用域插槽，該插槽必須放在template標籤裏面，同時聲明從子組件接收的數據放在一個自定義屬性內，並定義該數據的渲染方式。通過下列展示作用域插槽的使用方式。
場景
多個相同子組件需要不同的渲染方式的情況下使用
注意
只要出現多個插槽，請始終爲所有的插槽使用完整的基於 的語法
示例
<body>
<div id='app'>
<child>
<template v-slot:default='slotProps'>
<h1>{{slotProps.user.username}}</h1>
</template>
<template v-slot:other='slotProps'>
<h5>{{slotProps.user.username}}</h5>
</template>
</child>
</div>
<script>
Vue.component('child', {
data: function () {
return {
user: {
username: 'wust',
password: '456'
}
}
},
template: `
<div>
<slot v-bind:user='user'>{{user.password}}</slot>
<slot v-bind:user='user' name='other'>{{user.password}}</slot>
</div>
`
})
var vm = new Vue({
el: '#app',
data: {
user: {
username: 'ljs',
password: '123'
}
}
})
</script>
</body>
結果
動態插槽名
如果要使用動態插槽名，需要在父組件上和v-slot處做相應處理。比如給父組件的data增加一個dynamicname屬性且值爲other後，v-slot:[dynamicname]='slotProps’就會渲染出上例一樣的效果。
2 過渡
2.1 過渡模式
以按鈕滑動過渡爲例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>vue過渡模式</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="vue.js"></script>
<style>
/* 1 僅僅透明度變化 2 滑動+透明度 */
/* .fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
} */
.fade-enter {
transform: translateX(20px);
}
.fade-leave-to {
transform: translateX(-20px);
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all 1s;
}
</style>
</head>
<body>
<div id="app">
<transition name="fade" mode="out-in">
<button v-if="show" key="on" @click="show=!show">on</button>
<button v-else="" key="off" @click="show=!show">off</button>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>
2.2 多個組件過渡
採用動態組件實現
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
<div id='app'>
<input type='radio' name='choice' @click='view="childOne"' />A
<input type='radio' name='choice' @click='view="childTwo"' />B
<transition name='fade' mode='out-in'>
<component :is="view"></component>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
view: 'childOne'
},
components: {
'childOne': {
template: '<div>childOne</div>'
},
'childTwo': {
template: '<div>childTwo</div>'
}
}
})
</script>
2.3 FLIP動畫多維網格過渡
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<style>
#wrapper {
display: flex;
flex-wrap: wrap;
width: 75px;
}
.cell {
width: 20px;
height: 20px;
padding: 1px;
border: 1px solid black;
display: flex;
justify-content: space-around;
align-items: center;
}
.fade-move {
transition: transform 1s;
}
</style>
<div id="container">
<button @click="shuffle">shuffle</button>
<transition-group name="fade" tag="div" id="wrapper">
<div class="cell" v-for="item in cells" :key="item.id">
{{ item.number }}
</div>
</transition-group>
</div>
<script>
new Vue({
el: '#container',
data: {
cells: Array.apply(null, {
length: 9
}).map(function(current, index) {
return {
id: index,
number: (index % 9) + 1
}
})
},
methods: {
shuffle: function() {
this.cells = _.shuffle(this.cells)
}
}
})
</script>
記錄：
- 設置了flex佈局之後發現還是單列形式，結果最後發現問題在於元素選擇錯誤，把按鈕也包括進去了。
- 這裏cells的生成方式是比較規範的一種，Array.apply(null,{length:9}).map(function(current,index){return {id:index,number:index%9+1}})，採用Array.apply生成的數組與直接new Array()得到的數組是不一樣的，後者只有length:9，相當於分配了空間，而前者卻是0-8每個元素值都爲undefined。