插槽slot
子组件中加入标签，父组件调用子组件时，双标签的内容，就会复制到slot中
app.component('global', {
template: `
<h3>global子组件开始</h3>
<slot></slot>
<h3>global子组件结束</h3>
`
});
<div>插槽slot</div>
<global><h2 style="color:red;">父组件传入的slot</h2></global>
<global><h2 style="color:blue;">父组件传入的slot</h2></global>插槽中使用子组件
父组件使用slot时，可以使用其他子组件
插槽中使用数据项
父组件使用slot时，可以使用数据项（动态数据）
父组件模板里调用的数据属性，使用的都是父组件里的数据
子组件模板里调用的数据属性，使用的都是子组件里的数据
Demo24.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div>
<h4>插槽slot</h4>
<p>子组件中加入
<slot></slot>标签，父组件调用子组件时，双标签的内容，就会复制到slot中</p>
<p>如果子组件不用emits声明，其实也可以调用，但控制台会打印警告</p>
<h4></h4>
<p>父组件使用slot时，可以使用其他子组件</p>
<h4>插槽中使用数据项</h4>
<p>父组件使用slot时，可以使用数据项（动态数据）</p>
<p>父组件模板里调用的数据属性，使用的都是父组件里的数据</p>
<p>子组件模板里调用的数据属性，使用的都是子组件里的数据</p>
<br>
</div>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
counter: 3
}
},
template: `
<div>插槽slot</div>
<global><h2 style="color:red;">父组件传入的slot</h2></global>
<global><h2 style="color:blue;">父组件传入的slot</h2></global>
<br>
<br>
<div>插槽中使用子组件</div>
<global><h2 style="color:red;">父组件传入的slot</h2></global>
<global>
<h2 style="color:blue;">父组件传入的slot,调用子组件</h2>
<global-param/>
</global>
<br>
<br>
<div>插槽中使用数据项</div>
<global><h2 style="color:red;">父组件传入的slot,使用父组件数据项{{counter}}</h2></global>
<br>
<br>
`
});
app.component('global', {
template: `
<h3>global子组件开始</h3>
<slot></slot>
<h3>global子组件结束</h3>
`
});
app.component('GlobalParam', {
data() {
return {
counter: 9
}
},
template: `
<h3>GlobalParam子组件{{counter}}开始</h3>
<slot></slot>
<h3>GlobalParam子组件{{counter}}结束</h3>
`
});
const vm = app.mount("#app");
</script>
</html>