(四) 组件化高级
1.插槽(slot)的基本使用
A:基本使用: <slot></slot>
B:默认置:<slot><h1>中间可以放默认值</h1></slot>
C:如果有多个值,同时放入到组件进行替换时,一起作为替换元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--父组件模版-->
<div id="app">
<zzj1><button>按钮</button></zzj1> <!--组件1加个按钮-->
<zzj1>长安镖局</zzj1> <!--组件2加个长安镖局-->
<zzj1><h1>预留插槽后中间可以随便放</h1></zzj1> <!--组件3加个h1标签-->
<zzj1></zzj1> <!--组件4显示默认值--> </div>
<!--子组件模版 -->
<template id="zzjmb">
<div>
<h2>{{title}}</h2>
<!--预留插槽,以便扩展组件,组件中抽取共性,把不同的预留在插槽-->
<!--<slot></slot>-->
<slot><h1>中间可以放默认值</h1></slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// root根组件(父组件)
const app = new Vue({
el: '#app',
// 创建注册子组件
components: {
zzj1: {
template: '#zzjmb',
data() {
return {
title: '子组件data中的数据'
}
},
}
}
})
</script>
</body>
</html> 插槽(slot)的基本使用
插槽(slot)的基本使用
2.具名插槽(slot)的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--父组件模版-->
<div id="app">
<zzj1><button>按钮</button></zzj1> <!--替换默认插槽-->
<zzj1><button slot="left">替换左边</button></zzj1> <!--替换左边插槽-->
</div>
<!--子组件模版 -->
<template id="zzjmb">
<div>
<h2>{{title}}</h2>
<!--具名插槽-->
<slot name="left"><span>左边</span></slot>
<slot name="center"><span >中间</span></slot>
<slot name="right"><span>右边</span></slot>
<slot ><span>默认</span></slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// root根组件(父组件)
const app = new Vue({
el: '#app',
// 创建注册子组件
components: {
zzj1: {
template: '#zzjmb',
data() {
return {
title: '子组件data中的数据-具名插槽'
}
},
}
}
})
</script>
</body>
</html> 具名插槽(slot)的使用
具名插槽(slot)的使用
3.变量编译的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--父组件模版-->
<div id="app">
<!--执行isshow会在当前模版中查找-->
<zzj1 v-show="isshow"></zzj1>
</div>
<!--子组件模版 -->
<template id="zzjmb">
<div>
<h2>{{title}}</h2>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// root根组件(父组件)
const app = new Vue({
el: '#app',
data: {
title:'我是父组件',
isshow:true
},
// 创建注册子组件
components: {
zzj1: {
template: '#zzjmb',
data() {
return {
title: '子组件data中的数据-编译的作用域',
isshow: false,
}
},
}
}
})
</script>
</body>
</html> 变量编译的作用域
变量编译的作用域
4.作用域插槽 (父组件替换插槽的标签,但是内容由子组件来提供)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><!--作用域插槽==>父组件替换插槽的标签,但是内容由子组件来提供-->
<!--父组件模版-->
<div id="app">
<zzj1><span slot="left" >子组件中展示的格式:</span></zzj1> <!--替换左边具名插槽-->
<zzj1>
<!--使用插槽的数据外面可以是template标签,也可以是其它标签-->
<span slot="left">父组件中展示的格式后面有"-":</span>
<template slot-scope="fyuyan1"> <!--用slot-scope接收子组件传的数据,后面变量名自定义-->
<span v-for="i in fyuyan1.data">{{i}} - </span><!--用变量名.data来使用数据-->
</template>
</zzj1>
<zzj1>
<span slot="left">父组件中展示的格式去掉后面的"-":</span>
<div slot-scope="fyuyan2">
<span>{{fyuyan2.data.join('-')}}</span><!--用join函数来展示-->
</div>
</zzj1>
</div>
<!--子组件模版 -->
<template id="zzjmb">
<div>
<ul>
<slot name="left"><span>左边</span></slot>
<slot :data="yuyan"><li v-for="i in yuyan">{{i}}</li></slot><!--自定义绑定名data,来绑定发射子组件的数据-->
</ul>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {},
components: {
zzj1: {
template: '#zzjmb',
data() {
return {
yuyan:['python','go','vue'],
title: '子组件data中的数据-编译的作用域',
}
},
}
}
})
</script>
</body>
</html>
作用域插槽