为保持组件化开发能满足一个组件布局的多种类展示,使用slot插槽即可解决。方法如下:
<!--
需求:
组件标题都是案例一,后面跟的标签需要不同。
第一个是按钮
第二是个h标签
第三个是p标签
基本使用
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<!-- 基本使用 -->
<!-- <cpn>
<button >返回按钮</button>
</cpn>
<cpn>
<h1>我是H1标签</h1>
</cpn>
<cpn>
<p>我是P标签</p>
</cpn> -->
<!-- 对应使用 -->
<cpn>
<button slot="left">返回按钮</button>
</cpn>
<cpn>
<button slot="left">返回按钮</button>
<span slot="center">标题</span>
</cpn>
<cpn>
<button slot="left">返回按钮</button>
<span slot="center">标题</span>
<button slot="right">更多</button>
</cpn>
</div>
<!-- 基本使用 -->
<!-- <template id="cpn">
<div>
<h1>案例1</h1>
<slot>我是slot的默认值</slot>
<p>------------------</p>
</div>
</template> -->
<!-- 具名使用(一一对应) -->
<template id="cpn">
<div>
<slot name="left">默认:left</slot>
<slot name="center">默认:center</slot>
<slot name="right">默认:right</slot>
<p>------------------</p>
</div>
</template>
</body>
<script>
var app = new Vue({
el:'#app',
components:{
cpn:{
template:"#cpn",
}
}
})
</script>
</html>
插槽的作用域的使用
使用环境:大部分是用于父组件想改变插槽中默认数据的展示方式,但由于数据来自于子组件展示,所以在父组件展示时无法获取子组件的数据,这时需用一下方法,具体步骤代码注释都有。
<!--
作用域插槽:
父组件想替换插槽里面的标签,但是数据是子组件提供的时候,需要
使用到作用域插槽
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>我是父组件</h1>
<cpn>
<!-- 父组件想修改子组件值的展示方式 -->
<!--
父组件需要添加slot-scope属性,绑定slot插槽,
然后渲染slot.自定义属性即可拿到,
子组件插槽中传来的值
-->
<template slot-scope='slot'>
<span>{{slot.list}}</span>
</template>
</cpn>
<cpn>
<!-- 父组件想修改子组件值的展示方式 -->
<template slot-scope='slot'>
<span>{{slot.list.join(" * ")}}</span>
</template>
</cpn>
</div>
<!-- 具名使用(一一对应) -->
<template id="cpn">
<div>
<h1>我是子组件</h1>
<!-- 需要给slot定义并绑定一个属性,将想要传递的值写上 -->
<slot :list='List'>
<ul>
<li v-for="item in List">{{item}}</li>
</ul>
</slot>
</div>
</template>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
},
methods:{
},
components:{
cpn:{
template:"#cpn",
data(){
return{
List:['Javascript','C','C++','swift']
}
},
}
}
})
</script>
</html>