<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<child>
<h1>Dell</h1>
</child>
<counter>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</counter>
</div>
<script>
Vue.component('child', {
template: `<div>
<p>hello</p>
<slot></slot>
</div>`
})
var counter = {
<!--slot插槽-->
template: `<div>
<slot name="header"></slot>
<div class="content">content</div>
<slot name="footer"></slot>
</div>`
}
var app = new Vue({
el: '#app',
components: {
counter: counter
}
})
</script>
</body>
</html>
slot插槽
最新推荐文章于 2024-06-27 13:56:15 发布