<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-header title="小蜜">
<button slot="left">左吧</button><button slot="right">右吧</button>
</my-header>
</div>
<script>
Vue.component('my-header', {
props: ['title'],
template: `<div>
<slot name='left'></slot>
{{title}}
<slot name='right'></slot>
</div>`
})
var vm = new Vue({
el:'#app'
})
</script>
</body>
</html>
Vue插槽的简单用法
最新推荐文章于 2023-12-17 21:27:58 发布