vue中slot的用法案例
阿新 • • 發佈：2018-05-30
pre arp array ops emp 圖片 bubuko template light
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<cont :list="[{name:‘xhA‘}]">
<!-- slot-scope設置插槽 -->
<!-- 因為list上prop獲取過來的 無法直接設置到插槽中 需要借助 slot-scope讀取到 然後才可以設置到插槽中 -->
<!-- 也可以將prop過來的數據 設置到data中 然後通過data來讀取 -->
<template slot="cc01" slot-scope="list">
<button>111 </button>
<!-- 設置插槽數據 -->
<div>{{list}}</div>
</template>
<template slot="cc02" slot-scope="list">
<!-- 直接通過直接父類data中來設置 -->
<button>222----{{dataList}}--333</button>
</template>
<template slot="cc03">
<button>333</button>
</template>
</cont>
</div>
<script>
Vue.component(‘cont‘,{
template:`<div>
<slot name="cc01" :list="list"></slot>
<slot name="cc02" :list="list"></slot>
<slot name="cc03" :list="list"></slot>
</div>`,
props:{
list:{
default:[],
type:Array
}
}
})
new Vue({
data:{
dataList:[{msg:‘111‘},{msg:‘222‘},{msg:‘333‘}]
}
}).$mount(‘#app‘)
</script>
</body>
</html>
vue中slot的用法案例