<!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>
原文地址：https://www.cnblogs.com/zhujiasheng/p/9110270.html
时间： 2024-10-09 00:27:04