<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<knight>
<span slot="name">knight</span>
<span slot="age">18</span>
<span slot="obj">object</span>
</knight>
</div>
<template id="knight">
<div>
<p>我是 <slot name="name"></slot> </p>
<p>今年 <slot name="age"></slot> 岁</p>
<p>对象 <slot name="obj"></slot> </p>
</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
// 插槽 组件标签,原本写入内容是不显示的
// 但是如果在组件中写了标签 需要在模板中写slot接受
// 什么都不写是匿名插槽 一次性全部插入
// 组件中写了标签带有slot属性与模板标签的name对应的话可以一一对应显示 叫具名插槽
new Vue({
el:"#app",
data(){
return {
}
},
components:{
knight:{
template:"#knight"
}
}
})
</script>
</body>
</html>
Python3Turtle