18-具名插槽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.min.js"></script>
<body>
<div id="app">
<cpn>
<span slot='left'>123</span> <!--更改名字为left的插槽-->
</cpn>
</div>
<template id="tem1">
<div>
<slot name='left'><span >左边</span></slot> <!-- 在slot内添加name属性,则可以更改指定的插槽,并且有利于区分 -->
<slot name='center'><span>中间</span></slot>
<slot name='right'><span >右边</span></slot>
</div>
</template>
<script>
Vue.component('cpn',{
template:'#tem1'
})
const app = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>