vue slot插槽的使用

slot插槽的使用场景

父组件向子组件传递dom时会用到插槽

作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽。展示的状态由父组件来决定

注:想要修改父组件向子组件传递的元素的样式时,只能在对应的子组件进行修改

1.具名插槽的使用

 父组件

<template slot="header">

<p>我是头部</p>

</template>

子组件

<slot name="header"></slot>

2.作用域插槽的使用1

父组件

<template slot-scope="props">

<li>{{props.content}}</li>

</template>

子组件

<ul>

<slot v-for="item of list" :content=item></slot>

</ul>

<script>

export default {

data(){

return {

list:[‘zhangsan‘,‘lisi‘,‘wangwu‘]

}

}

}

</script>

3.作用域插槽的使用2

父组件

<template slot-scope="props">

<tr>

<td>{{props.item.name}}</td>

<td>{{props.item.age}}</td>

</tr>

</template>

子组件

<table>

<tr>

<th>姓名</th>

<th>年龄</th>

</tr>

<slot v-for="item of data" :item=item></slot>

</table>

<script>

export default {

data(){

return {

data:[{

name:‘张三‘,

age:20

},{

name:‘李四‘,

age:14

},{

name:‘王五‘,

age:10

}]

}

}

}

</script>

2.作用域插槽的使用

原文地址:https://www.cnblogs.com/zousaili/p/9415434.html

时间: 2024-11-09 06:03:01

vue slot插槽的使用的相关文章

Vue slot 插槽

Vue  的插槽感觉上是一个组件函数,和函数一样进行参数的传递来改变组件的据题内容. 使用指令:v-slot //插口的基本使用 <body> <div id="app"> <!-- 传入元素参数 --> <login><span>demo</span></login> </div> </body> <template id="login"> &l

vue slot插槽的使用方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> </head> <

Vue 之 slot(插槽)

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

slot插槽(学习笔记)

slot插槽(有默认值,也有名称)一般情况下通过名称进行匹配什么是插槽,有什么用?插槽相当于插入的一个东西,可以用来灵活的封装组件,比如说封装一个模态框对组件进行内容的定制,slot插槽,一对组件标签中的结构,最终会被插入到组件的模板中去的使用方法思路:子组件定义完成.需要灵活的改变子组件里面的东西.可以在子组件注册的标签里面写<slot></slot>来完成内容替换,当然有name来进行标识是最好的 案例: <!DOCTYPE html> <html lang=

vue中插槽

当定义完一个组件后,可能在使用时还需要往这个组件中插入新的元素或者文本.这个时候就可以使用插槽来完成. 在定义`template`时,在需要插入的地方使用`<slot></slot>`标识出来.在使用时只需将传递的值放在定义的组件标签包裹起来即可. 插槽可以设置默认值.在定义template时,用`slot`标签包裹起来即可,当没有传递值时就使用默认值,但传值后,则使用新的值. 插槽当中的变量是从父组件的变量中读取的,而非从该组件中读取.也就是说:在插槽中使用`{{  }}` 定义

Vue中插槽slot的使用

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类. 非插槽模板指的是html模板,比如‘div.span.ul.table’这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制: 插槽模板是slot,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的html模

Vue.js slot插槽

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

436 vue slot:插槽基本使用,具名插槽,作用域插槽

1. 插槽 : 替换内容 / 分发内容 (1)占位,像出口<router-view></router-view>. (2)没有新的内容放进来,就用默认的. (3)<slot></slot>将被替换成组件内的对应子节点. 2. 基本使用 <el-car> <div>宝马发动机</div> </el-car> 组件的内部 02-插槽的基本使用.html <!DOCTYPE html> <html

vue使用插槽分发内容slot的用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </style></he