<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--默认情况下在Navbar1这个组件总,标签中输入代码是不会生效的即Navbar1按钮不会显示-->
<Navbar1><button>Navbar1</button><slot><button>slot1</button></slot></Navbar1>
<!-- 此种做法可做到 为ttt属性为Navbar2中添加内容,但是存在2个弊端,1不能显示html元素,2内容多的时候这种写法太臃肿-->
<Navbar2 ttt='<button>www222</button>'></Navbar2>
<!--默认插槽案例-->
<Navbar3><h3>这是h3</h3></Navbar3>
<!--具名插槽案例-->
<Navbar4>
<template v-slot:abc><button>abc</button></template>
<template v-slot:efg><button>efg</button></template>
<h5>没人认领的h5东西会被分配到默认插槽中</h5>
</Navbar4>
<!--作用域插槽案例-->
<Navbar5>
<template v-slot:d="scope">
{{scope.user.name}}----{{scope.user.age}}
</template>
</Navbar5>
<!--解构写法-->
<Navbar5>
<template v-slot:d="{user}">
{{user.name}}----{{user.age}}
</template>
</Navbar5>
<!--加#号,缩写,写法-->
<Navbar5>
<template #d="{user}">
{{user.name}}----{{user.age}}
</template>
</Navbar5>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script type="text/javascript">
//案例1:不使用插槽
Vue.component("Navbar1",{
template:`<h1>首页</h1>`
})
//案例2:使用配置赋值
Vue.component("Navbar2",{//这种方式也可以做到将
props:['ttt'],
template:`<h1>wumo{{ttt}}</h1>`
})
//插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签
//插槽有三种：默认插槽、具名插槽、作用域插槽
//插槽在没有不设置名字的时候系统默认会自动加上一个 名字,即name="default"
//插槽案例一:默认插槽,代码中<slot></slot>相当于<slot name="default"></slot>
Vue.component("Navbar3",{
template:`<h1>template组件中默认内容h1<slot>子组件中如果没有内容,此处会显示,如果有,则不显示这里,而显示子组件中内容</slot></h1>`
})
//插槽案例二:具名插槽,组件中所有不写在具名插槽中的内容会被自动显示
Vue.component("Navbar4",{
template:`<h1>具名插槽abc
<slot name="abc"></slot>
<hr/>具名插槽efg
<slot name="efg"></slot>
<hr/>
默认插槽<slot></slot>
</h1>`
})
//插槽案例三:作用域插槽,让Navbar5组件内部定义的变量user外部可以做到获取(默认是不能获取的)
//作用域插槽的好处是灵活控制,可以做到提前对数据筛选过滤的作用
Vue.component("Navbar5",{
data(){
return {userlist:[{name:'lisi',age:21},{name:'zhangsan',age:20},{name:'wangwu',age:22}]}
},
template:`<h1>
<div v-for="user in userlist">
<slot name="d" :user="user"></slot>
</div>
</h1>`
})
</script>
</body>
</html>
扫一扫
03-01
275
275
07-21
1642
1642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
