·如果组件中有多个位置需要设置插槽,据需要给设置 name,称为具名插槽。
具名插槽的缩写
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
<div id=“app”>
<com-a>
<template v-slot:header>
<h3>组件的头部内容</h3>
</template>
<!—
组件的主体内容1
组件的主体内容2
—>
<p>组件的主体内容1</p>
<p>组件的主体内容2</p>
<template #footer>
<p>组件底部内容</p>
</template>
</com-a>
</div>
<script src=“lib/vue.js”></script>
<script>
// 子组件
Vue.component(‘ComA’, {
template: `
`
});
new Vue({
el: ‘#app’,
data: {
}
});
</script>
</body>
</html>
