文章目录
前言
上一篇介绍了组件之间的相互访问,不同于组件通信的是:通过props和this.$emit()只能传递数据;而访问除了数据还可以访问组件内部的方法。
接下来介绍组件插槽slot的运用。slot包括基本slot的使用、具名插槽以及作用域插槽。
一、slot的基本使用
首先介绍最基本的slot使用,让大家了解插槽是什么。组件的特性就是可复用,这也是开发组件的目的,但是不同的应用场景对组件的需求也不尽相同。这时,slot就允许我们替换掉插槽里的内容,渲染出符合要求的组件。
代码示例如下:可以为插槽slot提供默认值,使用时如不替换就显示默认值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slot的使用</title>
<script src="../../vue/vue.js" type="text/JavaScript" charset="utf-8"></script>
</head>
<body>
<!--1、slot预留插槽,使用组件时填入特定内容
2、slot可以提供默认值
-->
<div id="app">
<cpn><button>{
{message}}</button></cpn>
<cpn></cpn>
</div>
<template id="myCpn">
<div>
<h2>我是组件,下方预留插槽</h2>
<slot>默认值</slot>
<slot>默认值</slot>
</div>
</template>