@[TOC](Vue 入门之浅谈插槽slot(一)插槽的简单使用)

插槽是什么

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。 https://cn.vuejs.org/v2/guide/components-slots.html

如何使用插槽

创建Vue/Cli项目

vue creat slot

根据项目需求配置所需插件

清空App.vue文件,删除HelloWorld.vue

新建Temp.vue

在Temp.vue写一个简单的vue模板

<template> <div id="temp"> {{msg}} </div> </template> <script> export default { props:["msg"], data(){ return { } } } </script> <style> #temp{ border: 1px solid #ccc; width: 80%; height: 40px; margin-top: 20px; } </style>

在App.vue中引入Temp并作为子组件使用

<template> <div id="app"> <app-temp :msg="msg" /> </div> </template> <script> import Temp from "./components/Temp" export default { name: 'app', components: { "app-temp":Temp }, data(){ return { msg:"hello app" } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; } #app span{ color: aqua; } </style>

此时只是简单的父组件向子组件传值跟slot并无关系，页面显示如下

如果我们向向子组件传递HTML代码的话props是无法实现的就需要用到slot

将页面结构做一下修改

App.vue

<template> <div id="app"> <app-temp> <span>{{msg}}</span> </app-temp> </div> </template> <script> import Temp from "./components/Temp" export default { name: 'app', components: { "app-temp":Temp }, data(){ return { msg:"hello app" } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; } /* #app span{ color: aqua; } */ </style>

Temp.vue

<template> <div id="temp"> <slot></slot> </div> </template> <script> export default { data(){ return { } } } </script> <style> #temp{ border: 1px solid #ccc; width: 80%; height: 40px; margin-top: 20px; } </style> 此时页面显示如下 此时hello app并不是直接显示在#temp下而是将嵌套在span标签内