VUE学习-插槽（四）
一、插槽
1、基础用法
是插槽，在组件中间写的所有内容，会在插槽中体现
如果 template 中没有包含一个
<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>Documenttitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<div id="app">
<div-b>
<input type="text" value="123456" />
<button>按钮button>
div-b>
div>
<script>
Vue.config.productionTip = false;
//创建vue对象
let vm = new Vue({
el : "#app",
data : {
name : 'wxb'
},
//局部组件
components:{
'div-b':{
//定义模板
//是插槽，在组件中间写的所有内容，会在插槽中体现
template:`
插槽前
插槽后
`
}
}
})
script>
body>
html>
2、具名插槽
A）搭基础
<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>Documenttitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<div id="app">
<b-box>b-box>
div>
<script>
Vue.component('b-box', {
template:`
我们希望把页头放这里
我们希望把主要内容放这里
`
})
new Vue({
el:"#app",
})
script>
body>
html>
B）引出问题
让显示内容在指定的插槽中展示
C）解决办法
<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>Documenttitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<div id="app">
<b-box>
<template v-slot:header>
<div>xxx管理系统div>
template>
<template v-slot:main>
<div>1111div>
<div>2222div>
<div>3333div>
template>
<template v-slot:footer>
<div>西安橡树div>
template>
b-box>
div>
<script>
//具名插槽，就是在定义插槽时，给插槽通过name属性起一个名字
//其实vue会默认给没有定义name属性的插槽，起一个default名字
Vue.component('b-box', {
template:`
`
})
new Vue({
el:"#app",
})
script>
body>
html>
3、作用域插槽
A）搭基础
<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>Documenttitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<div id="app">
<b-list :data="stus" @deldata="delStu">b-list>
div>
<script>
Vue.component('b-list', {
props:['data'],
template:`
学生管理系统
-
{{item.name}}
`,
methods: {
del(i){
this.$emit('deldata', i);
}
},
})
new Vue({
el:"#app",
data() {
return {
stus:[
{id:1,name:'www1'},
{id:2,name:'www2'}
]
}
},
methods: {
delStu(i){
this.stus.splice(i,1)
}
},
})
script>
body>
html>
B）引出问题
为了组件的通用性，删除按钮不应写死（只限制为button，应该由使用者决定，是button还是a标签或者其他）
此时就需要引入插槽来由使用者决定使用什么标签作为删除按钮，但是由此引出问题：删除的时候传的参数i如何向外传
<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>Documenttitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<div id="app">
<b-list :data="stus" @deldata="delStu">
<a href="javascript:;">删除a>
b-list>
div>
<script>
Vue.component('b-list', {
props:['data'],
template:`
学生管理系统
-
{{item.name}}
`,
methods: {
del(i){
this.$emit('deldata', i);
}
},
})
new Vue({
el:"#app",
data() {
return {
stus:[
{id:1,name:'www1'},
{id:2,name:'www2'}
]
}
},
methods: {
delStu(i){
this.stus.splice(i,1)
}
},
})
script>
body>
html>
C）解决办法
<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>Documenttitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<div id="app">
<b-list :data="stus">
<template v-slot:wxb="aa">
<a href="javascript:;" @click="delStu(aa.abc)">删除a>
template>
b-list>
div>
<script>
Vue.component('b-list', {
props:['data'],
template:`
学生管理系统
-
{{item.name}}
`,
methods: {
del(i){
this.$emit('deldata', i);
}
},
})
new Vue({
el:"#app",
data() {
return {
stus:[
{id:1,name:'www1'},
{id:2,name:'www2'}
]
}
},
methods: {
delStu(i){
this.stus.splice(i,1)
}
},
})
script>
body>
html>
4、官方文档
https://cn.vuejs.org/v2/guide/components-slots.html