Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项

1. 默认插槽

父组件标签内写的所有内容都放在插槽中

父组件：

    <h1>我是父组件</h1><base-body><h3>父组件将内容插入到了子组件的插槽中</h3></base-body><h1>我是父组件</h1>

子组件：

    <h4>我是子组件</h4><slot></slot><!-- 默认name='default' --><h4>我是子组件</h4>

输出:

2.具名插槽

有名字的插槽，可以将指定内容放到指定插槽中

父组件：

    <h1>我是父组件</h1><base-body><h3 slot="header">父组件将内容插入到了子组件的插槽中（具名插槽）</h3><h3>父组件将内容插入到了子组件的插槽中（默认插槽）</h3><h3 slot="footer">父组件将内容插入到了子组件的插槽中（具名插槽）</h3></base-body><h1>我是父组件</h1>

子组件：

    <h4>我是子组件</h4><slot name="header"></slot><slot></slot><slot name="footer"></slot><h4>我是子组件</h4>

输出：

3.作用域插槽

实现数据子传父

父组件：

    <h1>我是父组件</h1><base-body><!-- 在 Vue 2.5.0 版本之前，要想使用作用域插槽获取子组件数据，必须使用 template 元素 --><template slot="header" slot-scope="d">{{d.text}}</template><!-- 在 Vue 2.5.0 版本之后，就可以使用其他元素 --><h3 slot="footer" slot-scope="d">{{d.haha}}</h3></base-body><h1>我是父组件</h1>

子组件：

    <h4>我是子组件</h4><slot name="header" text="父组件获取子组件自定义属性1"></slot><slot name="footer" haha="父组件获取子组件自定义属性2"></slot><h4>我是子组件</h4>

输出：

4. 使用作用域插槽实现删除列表项

父组件：

<template><div><h1>我是父组件</h1><base-body :list="list">  <!-- 父传子（自定义属性） --><p slot="header" slot-scope="data"><button @click="del(data.zzz.id)">父组件填充按钮到子组件中</button></p></base-body><h1>我是父组件</h1></div>
</template><script>
import baseBody from "../components/baseBody.vue";export default {data() {return {list: [{ id: 1, classical: "浮世三千，吾爱有三" },{ id: 2, classical: "日，月与卿" },{ id: 3, classical: "日为朝，月为暮，卿为朝朝暮暮" },],};},components: {baseBody,},methods: {del(id) {console.log("del:", id);this.list=this.list.filter(item=>item.id!==id)},},
};
</script><style lang="scss" scoped></style>

子组件:

<template><div><p v-for="item in list" :key="item.id">{{ item.classical }}<slot name="header" :zzz="item"></slot></p></div>
</template><script>
export default {props: ["list"],
};
</script><style lang="scss" scoped>
p{display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: center;height: 20px;line-height: 20px;border-bottom: 1px solid black;
}
</style>

Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项相关推荐

Vue 删除列表项的淡出动画
使用vue前端框架尝试做一个购物车页面,勾选进购物车的商品列表可删除,代码如下: **<template>部分** <div class="goods-list-wrap& ...
vue-默认插槽-具名插槽-作用域插槽-ref，props，mixin混入，插件
插槽用法,ref,props,mixin混入,插件 ref props mini混入插件插槽默认插槽具名插槽作用域插槽 ref ref属性 1.被用来给元素或子组件注册引用信息(id的替代者 ...
VUE——slot插槽（特别重要，尤其是作用域插槽）
文章目录求一键三连重点认识插槽插槽的使用多个插槽(具名插槽 name=''name" #name) 当图片路径较深时怎么办:使用@ 渲染作用域作用域插槽(插槽传递子组件属性) 子 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
python 作用域前缀_TENSORFLOW变量作用域（VARIABLE SCOPE）
举例说明 TensorFlow中的变量一般就是模型的参数.当模型复杂的时候共享变量会无比复杂. 官网给了一个case,当创建两层卷积的过滤器时,每输入一次图片就会创建一次过滤器对应的变量,但是我们希望 ...
python作用域-Python之函数作用域
1.作用域介绍也叫名称空间全局名称空间:创建的存储"变量名与值的关系"的空间叫做全局名称空间局部名称空间:在函数的运行中开辟的临时的空间叫做局部名称空间内置名称空间:内置名称 ...
【Vue案例二】实现对表单数据的添加、删除以及关键字查询操作
本文我们通过一个小案例来巩固一下前面学到的内容,即实现对表单数据的添加,删除和关键字查询的操作,具体案例效果如下: <!DOCTYPE html> <html lang=" ...
python函数的作用域_Python之函数作用域
1.作用域介绍也叫名称空间全局名称空间:创建的存储"变量名与值的关系"的空间叫做全局名称空间局部名称空间:在函数的运行中开辟的临时的空间叫做局部名称空间内置名称空间:内置名称 ...
python内置作用域_python中的作用域
python中的作用域分4种情况: L:local,局部作用域,即函数中定义的变量: E:enclosing,嵌套的父级函数的局部作用域,即包含此函数的上级函数的局部作用域,但不是全局的: G:glo ...

Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项

Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项

1. 默认插槽

2.具名插槽

3.作用域插槽

4. 使用作用域插槽实现删除列表项

Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项相关推荐

最新文章

热门文章