第九十一篇:Vue 具名插槽作用域
好家伙,
1.作用域插槽
插槽在定义的时候,可以定义一些属性,便于在父组件中使用
来看看代码:
Article.vue组件中:
<template>
<div class="article-container">
<!-- 文章内容 -->
<div class="header-box">
<!-- 在封装组件时,为预留的<slot></slot>提供对应的值,
这种用法叫做"作用域插槽" -->
<slot name="title" msg="我是msg属性"></slot>
</div>
<!-- 文章标题-->
<div class="content-box">
<slot name="content"></slot>
</div>
<!-- 文章作者 -->
<div class="footer-box">
<slot name="author"></slot>
</div>
</div>
</template>
App.vue组件中:
<template>
<div>
<h1>App根组件</h1>
<Article>
<template #title="obj">
<h3>我是头</h3>
<p>{{ obj }}</p>
</template> <template #content>
<h3>写博客真是一件开心的事情(NO)</h3>
</template> <template #author>
<h3>作者:养肥胖虎</h3>
</template>
</Article>
</div>
</template>
截图如下:
msg的值是在子组件中定义的,
父组件中拿到msg的值,
再在子组件中把它渲染出来,
无形中完成了一次子父传值
2.作用域插槽的结构赋值
将Article.vue组件中的代码改为:
<template>
<div class="article-container">
<!-- 文章内容 -->
<div class="header-box">
<!-- 在封装组件时,为预留的<slot></slot>提供对应的值,
这种用法叫做"作用域插槽" -->
<slot name="title" msg="我是msg属性" :user="userinfo"></slot>
</div>
<!-- 文章标题-->
<div class="content-box">
<slot name="content"></slot>
</div>
<!-- 文章作者 -->
<div class="footer-box">
<slot name="author"></slot>
</div>
</div> </template> <script>
export default {
name:'Article',
data(){
return{
//用户信息对象
userinfo:{
name:'zs',
age:20 }
}
}
}
</script>
于是在父组件中,可以使用解构方法调用值:
在App.vue组件中:
<template>
<div>
<h1>App根组件</h1>
<Article>
<template #title="{ msg,user }">
<h3>我是头</h3>
<p>{{ msg }}</p>
<p>{{ user }}</p>
<p>{{ user.name }}</p>
</template> <template #content>
<h3>写博客真是一件开心的事情(NO)</h3>
</template> <template #author>
<h3>作者:养肥胖虎</h3>
</template>
</Article>
</div>
</template>
搞定后:
That's all
第九十一篇:Vue 具名插槽作用域的更多相关文章
- 第九十篇:Vue 具名插槽
好家伙 1.什么是具名插槽? 来简单理解一下, 具有自己名字的插槽,就是具名插槽 我们来尝试使用一下具名插槽: 在Article.vue组件中: <template> <div cl ...
- vue中插槽作用域的使用
一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 在组件内部用slot进行接受,如果给 ...
- 第十一篇:vue.js监听属性(大作业进行时)
这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...
- [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)
1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- vue中具名插槽的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue(基础二)_组件,过滤器,具名插槽
一.前言 主要包括: 1.组件(全局组件和局部组件) 2.父组件和子组件之间的通信(单层) 3.插槽和具名插槽 ...
- Vue中的作用域插槽
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue组件---插槽
(1)插槽内容 Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 在父级组件里可以 ...
随机推荐
- service继承baseService后无法注入dao的解决办法
1.在set方法上加@Autowired 2.在set方法上加@Resource 这样子就可以拿到dao了
- Javaweb-Servlet学习
1.Servlet简介 Servlet就是sun公司开发动态web的一门技术 Sun在这些API中提供一个借口叫做:Servlet,如果你想开发一个Servlet程序,只需要完成两个小步骤: 编写一个 ...
- python基础知识-day8(模块与包、random、os)
1.模块与包 package:相同的模块代码存储在一个目录下(即包里边会包含多个模块). 包不能存储在文件夹的目录下,模块名称不能使用关键字.(不包含工程文件夹) 2.模块与包的实例 1)在工程文 ...
- c# 怎样能写个sql的解析器
c# 怎样能写个sql的解析器 本示例主要是讲明sql解析的原理,真实的源代码下查看 sql解析器源代码 详细示例DEMO 请查看demo代码 前言 阅读本文需要有一定正则表达式基础 正则表达式基础教 ...
- vim插件pathogen的Helptags不起作用
如果你安装了中文vim帮助,并且在其中添加了自己的帮助文件,并且当你使用了pathogen的时候. 会发现Helptags不起作用. 原因是Helptags的实现没有考虑到中文的情况 解决办法如下: ...
- CTCLoss如何使用
CTCLoss如何使用 目录 CTCLoss如何使用 什么是CTC 架构介绍 一个简单的例子 CTC计算的推导 总概率\(p(z|x)\) 路径的含义 路径概率\(p(\pi|x)\) 什么是\(\m ...
- PaddleOCR系列(一)--环境搭建
官方建议使用他们的docker镜像,所以我们按照他们建议的来. 环境搭建其实很简单,其实不需要在宿主机上配置cuda及cudnn,只需要保证宿主机上的cuda大于docker镜像中的就可以了. 所以我 ...
- P2512 【一本通提高篇贪心】「一本通 1.1 练习 6」[HAOI2008]糖果传递
[HAOI2008]糖果传递 题目描述 有 n n n 个小朋友坐成一圈,每人有 a i a_i ai 个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为 1 1 1. 输入格式 小朋友 ...
- 【一本通提高组合数学】 计算系数(NOIP2011提高组)
题面 思路 根据二项式定理, 那么 算 需要用快速幂. 可以根据组合式的递推公式算组合数.我是这么写的. 或者是利用组合数的定义式,但是因为有取余, 所以要用逆元. 其中 为逆元, 这个可以直接用 ...
- linux 学习 mysql安装到连接
在Centos7.6 上安装mysql ps:一般mysql安装后会在/var/log/下面生成一个mysqld.log文件,如果遇到启动不了或者其他问题,基本都可以在这个log文件里面找到错误原因 ...