vue3知识点4slot插槽/具名插槽代码
发布时间
阅读量:
阅读量
前言:以下为slot插槽的示例代码。
关于更全面的解析,建议前往vue3组件详解链接查阅相关目录中的slot插槽内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slot插槽</title>
<script src="js/vue.global.js"></script>
</head>
<body>
<div id="app">
<div>我是头部</div>
<!-- 子组件1:演示插槽 -->
<tempbtn>
<h3>我是父组件中原有的布局。</h3>
</tempbtn>
<!-- 子组件1:演示具名插槽 -->
<temp2btn>
<!-- 如果父组件遗留了两个部分在子组件2里,就要用到具名插槽了。 -->
<template v-slot:header1>
<h3 >我是父组件的布局1</h3>
</template>
<template v-slot:header2>
全部评论 (0)
还没有任何评论哟~
