vue-solt插槽

场景：当子组件某个节点需要动态渲染/样式修改，就可以利用插槽形式单独配置

1.v-slot方法（默认default）

举例：
子组件

<template><div class="child"><div>我是child组件</div><slot></slot></div></template>

调用

 <template><div>我是父组件<child v-slot:default><p style="color:red">我是父组件插槽内容</p></child></div></template>

或

 <template><div>我是父组件<child><p style="color:red">我是父组件插槽内容</p></child></div></template>

2.v-slot:name/ #name 请勿混用
子组件

<template><div class="child"><div>我是child组件</div><slot slot="header"></slot></div></template>

调用

 <template><div>我是父组件<child v-slot:header><p style="color:red">我是父组件插槽内容</p></child></div></template>

或者

 <template><div>我是父组件<child #header><p style="color:red">我是父组件插槽内容</p></child></div></template>

老版本父级接收 slot-scope=“user”

vue-solt插槽相关推荐

vue solt(插槽)用法小结
之前看vue官方文档,对slot插槽分发理解模糊,最近项目中使用了slot,便梳理总结了一下,如下为我的理解: 一般vue的slot用法有两种,一种是单独使用,一种是具名solt 1.单独使用: 如下 ...
Vue solt 插槽使用~
一.基本使用: 子组件: 在子组件中使用<slot></slot>给值留下位置, 可以得到父组件的值 <template> <div> <stro ...
vue 组件插槽solt 的使用
最近在写项目时接触到了这个组件,所以这次的blog想要记录下当时的问题. 场景: 在列表筛选时,情况一,页面显示出筛选的列表内容,情况二,页面显示"暂无该筛选信息!",所以想要做出 ...
【Vue】—插槽的基本语法
[Vue]-插槽的基本语法 <template><div><h1>这是父级</h1><Son><div><p>nam ...
Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项
Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽父组件标签内写的所有内容都放在插槽中父组件: <h1>我是父组件</h1><base-b ...
vue具名插槽的使用
vue的插槽自我总结 vue的匿名插槽(默认插槽) vue的具名插槽 vue的作用域插槽 vue的匿名插槽(默认插槽) 父组件 <div><myslot>我是刚刚</my ...
vue 具名插槽用法
vue 具名插槽用法 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
14. vue的插槽
vue的插槽插槽这个概念相对就比较抽象,但抽象的概念用生活中常见的事物去做类比,也就变得没那么抽象了! 举一个生活中的例子:比如装修房子的时候我们会在很多地方预留出一些插孔,可能要插电冰箱,插电式, ...
Vue的插槽slot的理解
Vue中插槽slot的理解 1.什么是插槽 2.插槽分类单个插槽具名插槽作用域插槽 3.版本升级后 v-slot的用法默认插槽还是使用,没有变化具名插槽作用域插槽本文将从之前的slot. ...
vue作用域插槽，你真的懂了吗？
前言在网上搜了很多关于作用域插槽的解释,感觉没有写得很具体的吧,我认为应该对组件化有很深的理解才会触及到这个问题吧,这里也分享下我自己对于slot-scope的一点理解. slot大家看看文档都懂了 ...

vue-solt插槽

vue-solt插槽相关推荐

最新文章

热门文章