slot插槽
2020-10-03 本文已影响0人
似朝朝我心
组件的插槽：
组件的插槽也是为了让我们封装的组件更加具有拓展性。
预留空间，让使用者可以决定组件内部的内容展示。
在移动开发中，几乎每个页面都有导航栏。我们一般都会封装成一个插件，比如nav-bar组件，一旦有了这样一个组件，我们就可以在多个页面中达到复用的效果.
插槽的基本使用：大家共用一个组件，但每个组件各自可以有属于自己的展示方式和空间。
使用方式：在组件模板里面定义一对<slot></slot>标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue根实例模板（父组件） -->
<div id="app">
<!-- 调用已经注册的子组件 -->
<div>
<com><button>按钮</button></com>
<com><h1>按钮</h1></com>
<com><i>按钮</i></com>
<com><strong>按钮</strong></com>
</div>
</div>
<!-- 子组件模板 -->
<template id="com">
<div>
<h2>我是组件</h2>
<slot></slot>
</div>
</template>
<script>
//将Vue实例作为父组件
const app = new Vue({
el: '#app',
data() {
return {
}
},
//子组件
components: {
com: {
template:'#com'
}
}
})
</script>
</body>
</html>
设置插槽的默认值：<slot>放置标签（比如button标签）</slot>
具名插槽：找到属于自己的slot
编译作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue根实例模板（父组件） -->
<div id="app">
<!-- 调用已经注册的子组件 -->
<div>
<com v-show="isShow"></com>
</div>
</div>
<!-- 子组件模板 -->
<template id="com">
<div>
<h2>我是子组件</h2>
</div>
</template>
<script>
//将Vue实例作为父组件
const app = new Vue({
el: '#app',
data() {
return {
isShow: true
}
},
//子组件
components: {
com: {
template:'#com'
},
data() {
return {
isShow: false
}
},
}
})
</script>
</body>
</html>
父组件的isShow设定为true,子组件的isShow:false,最终渲染到页面中的是vue实例里定义的isShow.
控制台查看。
为什么会只有vue实例的isShow生效呢？
虽然子组件绑定了v-show="isShow",理应去子组件模板下找才对，但vue默认绑定的是vue根实例的模板，所以会在直接在vue实例的模板下去找，这就是作用域，所有的变量都会在vue里里面去找。
作用域插槽：父组件替换插槽的标签，但是数据由子组件来提供。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue根实例模板（父组件） -->
<div id="app">
<!-- 调用已经注册的子组件 -->
<div>
<com></com>
<com>
<!--目的是获取子组件的中的pLanguages（pLanguages它在子组件作用域里面），
但<com/>自己的位置却是在vue实例作用域里面,所以我们不存在跨域获取-->
<template slot-scope="slot">
<span v-for="item in slot.data">{{item}} -</span>
<!-- <span>{{slot.data.join(' - ')}}</span> -->
</template>
</com>
</div>
</div>
<!-- 子组件模板 -->
<template id="com">
<div>
<h2>我是子组件</h2>
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
//将Vue根实例作为父组件
const app = new Vue({
el: '#app',
data() {
return {
}
},
//子组件
components: {
com: {
template: '#com',
data() {
return {
pLanguages: ['JavaScript', 'C++', 'Java', 'Python', 'Go', 'Swift']
}
},
}
}
})
</script>
</body>
</html>
演变到了v-slot
https://blog.csdn.net/liushijun_/article/details/92186739
