<title>slot插槽</title>
</head>
<body>
<!-- html -->
<div id="app">
<h1>这是一个如何使用插槽的文档</h1>
<movie>
<template v-slot:before>
<p>这是故事的开始</p>
</template>
<template #end>
<p>这是故事的开始</p>
</template>
<img
src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1981857816,660769246&fm=26&gp=0.jpg"
alt=""
/>
</movie>
</div>
<!-- js -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
// slot 就叫插槽,占位符
// slot 设置一个name属性,这个叫具名插槽
// 使用的时候需要设置一个template节点,通过v-slot进行绑定,或者v-slot可以简写为#
const movie = {
template: `<div class="movie">
<slot name="before"></slot>
<h3>忠犬八公</h3>
<slot></slot>
<p>评论:呜呜呜......真是太感人了</p>
<p>点评:这个电影告诉我们,人与动物之间的情感是伟大的,它们是十分忠诚的,我们一定要善待它们。</p>
<slot name="end"></slot>
</div>`,
};
new Vue({
el: "#app",
components: {
movie,
},
});
</script>
</body>
vue---slot插槽的使用
最新推荐文章于 2022-08-09 13:45:30 发布