<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<div>
<!-- 组件 -->
<first-com>
<!-- 理解为组件的结构 -->
<!-- 将header传递分发到 name为header的slot标签中 -->
<!-- 2.6写法 header为name 为插槽的name-->
<!-- <template v-slot:header1="obj"> -->
<!-- 需要传参的时候的写法 -->
<template v-slot:header1="{qweqwe}"><!-- 这里也能使用解构赋值 -->
<fieldset>
<legend>插槽传入的内容1</legend>
<!-- {{obj.qweqwe}} -->
{{qweqwe}}
</fieldset>
</template>
<!-- 将main传递分发到 name为main的slot标签中 -->
<!-- 2.5写法 -->
<!-- 不传参的写法 -->
<fieldset slot="main">
<legend>插槽传入的内容2</legend>
</fieldset>
<fieldset>
<legend>剩下的内容</legend>
</fieldset>
<h2>哈哈哈</h2>
</first-com>
</div>
</div>
<template id='tem'>
<fieldset>
<legend>{{word}}
</legend>
<!-- 插槽 用于分发内容 可以用户自定义的内容 对于封装组件很重要
在很多ui组件中 大量使用 element-ui -->
<div class="header">
<!-- 理解为组件名 -->
<!-- name 为插槽的名称 qweqwe 为传递给结构的值-->
<slot name='header1' :qweqwe="arr2"></slot><!-- 具名插槽 -->
</div>
<div class="main">
<!-- 理解为组件名 -->
<slot name="main" :main="arr1"></slot><!-- 具名插槽 -->
</div>
<slot></slot><!-- 默认插槽 -->
</fieldset>
</template>
<script src="../../vue.js"></script>
<script>
/*
slot 插槽 用于内容分发
将slot元素作为内容分发的出口
分装组件的时候 特别需要的 一种预留的接口
*/
Vue.component('first-com', {
data() {
return {
word: '插槽',
arr1:['真真','爱爱','怜怜'],
arr2:['悟空','八戒','达摩'],
}
},
template: "#tem",
})
// root组件
const vm = new Vue({
el: '#app',
data: {
name: 'root组件',
word: '岁月的童话',
mov1: "狼的孩子雨和雪"
},
});
/*
slot 插槽
*/
</script>
</body>
</html>
vue slot 插槽的使用 具名插槽 进行内容分发
最新推荐文章于 2024-07-26 13:02:41 发布
907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
