<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="../vue.js"></script>
<style>
</style>
</head>
<body>
<div id="main" class="container">
<child>
<!--插槽就是子组件中预留出的位置,在父区间中去实现,父组件的实现各有不同,类似于接口-->
<div slot="a">插槽a</div>
<div slot="b">插槽b</div>
</child>
</div>
<script>
Vue.component('child',{
template: `
<div>
<slot name="a"></slot>
子组件的内容
<slot name="b"></slot>
</div>
`
});
new Vue({
el: '#main',
data: {
},
methods: {
}
})
</script>
</body>
</html>
vue中的slot初体验
最新推荐文章于 2023-09-21 14:44:58 发布