Vue 作用域插槽
使用场景:复用子组件的slot,又可以使slot的内容不一样。
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <title>Vue</title>
- </head>
- <body>
- <div id="app">
- <my-component :books="books">
- <template slot="book" slot-scope="props">
- <li>{{props.bookName}}</li>
- </template>
- </my-component>
- </div>
- <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
- <script type="text/javascript">
- Vue.component('my-component', {
- template: ` <ul> <slot name="book" v-for="book in books" :book-name="book.name"><slot> </ul> `,
- props: {
- books: {
- type: Array,
- default: function() {
- return [];
- }
- }
- }
- });
- new Vue({
- el: "#app",
- data: {
- books: [{
- name: 'css'
- }, {
- name: 'js'
- }, {
- name: 'html'
- }, ]
- }
- })
- </script>
- </body>
- </html>
Vue 作用域插槽的更多相关文章
- vue作用域插槽的应用
问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...
- 细说Vue作用域插槽,匹配应用场景。
最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...
- vue 开发系列(十) VUE 作用域插槽
使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...
- Vue作用域插槽:用作循环结构的模版
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...
- Vue作用域插槽:基本用法
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <user v-slot:de ...
- vue作用域插槽
简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据. 案例如下:有CurUser组件 <template> <span> <!-- 在slot 元素上绑定user, ...
- 新版vue作用域插槽的使用
2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用: 也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...
- vue作用域插槽实践
引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def ...
- Vue的作用域插槽
一.通常情况下都是父组件传递数据给子组件进行展示的(无法改变子组件的展示方式):而作用域插槽允许子组件通过slot向父组件传递数据,类似React中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...
随机推荐
- 洛谷——P1529 回家 Bessie Come Home
P1529 回家 Bessie Come Home 题目描述 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出 ...
- Quartz.NET 3.0.7 + MySql 动态调度作业+动态切换版本+多作业引用同一程序集不同版本+持久化+集群(四)
把 HAProxy 用上了,终于不用担心某个节点挂了,还要去手动修改管理后台配置文件的api地址了. 在某网站下载了一个 window 可以用的版本 haproxy-1.7.8 不得不吐槽一下,作者要 ...
- C++中的error C2662,const的this指针问题
今天在写C++代码的时候遇到一个错误,涉及到了常量的this指针的问题. 简化后的代码如下: #include <iostream> #include <string> usi ...
- Java 对象池实现
http://blog.csdn.net/bryantd/article/details/1100019 http://www.cnblogs.com/devinzhang/archive/2012/ ...
- 【斜率优化】Average
[UVa1451]Average 算法竞赛入门经典第8章8-9 ( P243 ) 题目大意:给定一个长度为N的01串,选择一个长度至少为L的连续子串,使序列平均值最大 (N<=100001) 题 ...
- python3-开发进阶-RESTful 软件架构风格
一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角 ...
- JDK源码学习笔记——Iterable/Iterator实现原理
Collection接口继承java.lang.Iterable接口,集合类重写了iterator()方法 public interface Iterable<T> { Iterator& ...
- Codeforces Round #127 (Div. 1) C. Fragile Bridges dp
C. Fragile Bridges 题目连接: http://codeforces.com/contest/201/problem/C Description You are playing a v ...
- XCode6 ,iOS之PCH文件配置
1: 创建PCH文件 NewFile-->Other中的PCH File-->Next-->Create 2:配置PCH文件 项目中的TARGETS-->Build Setti ...
- arcgis andriod 点击后变色
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...