vue之slot用法

slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。

有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。

一、单个组件

如果子组件的模板不包含 slot,那么父组件的内容就会被抛弃

父组件内容

<template>
  <div>
    <child>若子组件没有slot,则这句话不会显示</child>
  </div>
</template>

<script>
import Child from ‘./Child.vue‘
export default {
  name: ‘HelloWorld‘,
  components:{
  	‘child‘:Child
  }
}
</script>

子组件内容

<template>
	<div>
		<h1>我是子组件</h1>
	</div>
</template> 

浏览器显示

因为子组件没有<slot> 元素,所以父组件的内容被抛弃,现在我们在子组件加上<slot> 元素

<template>
	<div>
		<h1>我是子组件</h1>
		<slot></slot>
	</div>
</template>

此时浏览器显示

此时,父组件的内容就显示在了子组件的内容里了。

二、具名slot

上面案例中讲解的是当组件的模板中有一个slot的方法,那么一个组件中如果想使用多个slot那么此时就应该使用具名slot。

父组件内容

<template>
   <child>
     <h1 slot="h1">标题一</h1>
     <h2 slot="h2">标题二</h2>
     <h3>标题三</h3>
   </child>
</template>

<script>
import Child from ‘./Child.vue‘
export default {
  components:{
  	‘child‘:Child
  }
}
</script>

子组件内容

<template>
	<div>
		<h1>我是子组件</h1>
		<slot name="h1"></slot>
		<slot name="hh"></slot>
		<slot></slot>
	</div>
</template>

浏览器显示

分析:子组件中的slot有name属性,与父组件的slot的值相对应,那么就会匹配到,若子组件中slot有name属性,但父组件没有与之相对的slot的值,则会被抛弃掉。父组件没有slot值的内容则会显示在默认的slot中。如果子组件中没有默认的slot,父组件没有slot值的内容就会被抛弃。

  

  

  

原文地址:https://www.cnblogs.com/clicklin/p/9389892.html

时间: 2024-10-25 20:54:15

vue之slot用法的相关文章

分享vue中 slot用法

//slot默认用法 //slot带参数name用法

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,

Vue 之 slot(插槽)

前言: vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”的想法,于是就关闭了vue的说明文档. 实际上,插槽的概念很简单,下面通过分三部分来讲.这三部分也是按照vue说明文档的顺序来写的. 进入这三部分之前,先让还没接触过插槽的同学对什么是插槽有一个简单的概念:插槽,也就是slot,是组件的一块HTML模板,这块模板

vue中slot的用法案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slot</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id=&

Vue.js slot插槽

1.个人理解的插槽 之所以使用组件,就是因为组件可以将复杂的页面分割成多个部分,每个 部分就是一个组件(也是一个vue文件).要使用这个组件,只需要引入组件文件,并在模版中写入组件标签即可,引入了这个子组件,就相当于引入了这个组件的html模版,例如: // App.vue <template> <div id="app"> <Child /> </div> </template> // Child组件 <templat

vue 插槽slot

本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 注意两点: <app> 组件不知道它会收到什么内容.这是由使用 <app> 的父组件决定的. <app>

vue路由高级用法

五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',redirect:'/list'}path:'*' 异常处理 {path:'*',component:'NotFound'} <!doctype html> <html> <head> <meta charset="UTF-8"> <ti

vue的基础用法

基础用法(没有搭建框架就在html文件里演示) 一. Hello World起步 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <!-- 模板 --> <div id="app&qu

vue的基本用法

公共样式---pc版的404报错 动态src 这个是vue组件template部分 <div class="not-found"> <img :src="img" alt="404"> </div> <div>{{fish}}</div> script部分 import './404.css' //先引入less import img from './error-404.png' exp