您当前的位置：学无止境 > vue插槽的简单使用网站首页学无止境
vue插槽的简单使用
发布时间：2022-12-14 16:54:25编辑：三青查看次数：217
vue插槽的简单使用
案例一（默认插槽）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<art-con>
<h5>study</h3>
</art-con>
</div>
<script>
var art_con = {
template:`
<h1><slot></slot> hello vue <slot></slot></h1>
`,
props:['ar']
}
const App = {
data() {
return {
}
},
components: {
'art-con':art_con
},
methods: {
}
};
Vue.createApp(App).mount('#app');
</script>
</body>
</html>显示输出：
案例二（具名插槽）（注：v-slot:只能在template里面使用，可以用#简写，类似thinkphp的block）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<lay-out>
<template v-slot:header><h1>this is header</h1></template>
<template v-slot:main>this is main</template>
<template #footer>this is footer</template>
</lay-out>
</div>
<script>
var lay_out = {
template:`
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot name="main"></slot>
main
</main>
<footer>
<slot name="footer"></slot>
</footer>
<div>
`
}
const App = {
data() {
return {
}
},
components: {
'lay-out':lay_out
},
methods: {
}
};
Vue.createApp(App).mount('#app');
</script>
</body>
</html>显示输出：
关键字词：vue,插槽,使用,slot
下一篇：vue动态组件的简单使用
评论：
