<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>slot,具名插槽</title>

         <div id="app">

             <child>

                 <div slot="header">header</div>

             </child>

         </div>

     </head>

     <body>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             Vue.component('child', {

                 template: `<div>

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

                                 <div>content</div>

                                 <slot name="footer">

                                     <div >footer</div>

                                 </slot>

                             </div>`

             })

             var app = new Vue({

                 el: '#app',

                 data: {

                 }

             })

         </script>

     </body>

 </html>

vue 插槽 slot的更多相关文章

  1. vue 插槽slot

    本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...

  2. Vue插槽 slot

    1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...

  3. 三、深入Vue组件——Vue插槽slot、动态组件

    一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...

  4. vue 插槽slot总结 slot看这篇就够了

    一直模糊所以梳理一下,看了好多篇园友的文章和官网文档在这整理一下 默认插槽 //slot组件<template> <div class="slots"> s ...

  5. vue插槽slot的理解与使用

    一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...

  6. vue 插槽 ------ slot 简单理解

    solt 插槽 内容分发 什么是插槽 Vue 实现了一套内容分发的 API,将 `` 元素作为承载分发内容的出口. 插槽显示的位置却由子组件自身决定,槽写在组件模板的什么位置,父组件传过来的模板将来就 ...

  7. Vue插槽slot理解与初体验 ~

    一.插槽的理解 1.官网介绍 Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口. 2.为什么使用插槽 Vue 中有一个重要的概念-组件,可以在开发中将子组 ...

  8. Vue 插槽 slot的简单实用

  9. Vue插槽：（2.6.0以后版本弃用slot和slot-scope，改用v-slot)

    关于Vue插槽的概念,大家可以从vue官网的api查看,我是看到网站的对于初接触 这个要概念的人来说不是很清楚,我来贴下原码,就比较直观了 贴下原码: 具名插槽:v-slot:header Html: ...

随机推荐

  1. Python3.5-20190513-廖老师-自我笔记-函数式编程

    把复杂的任务拆成各个小的函数,通过函数的调用来完成任务.这就是面向过程编程. 高阶函数:就是让函数的参数能够接收别的函数.把函数作为参数传入到另一个函数. 函数名也是变量.和变量用法一样的,指向一个函 ...

  2. spring mvc 整合 druid

    环境: ubuntu eclipse maven 一. pom.xml 加入druid 依赖 <!-- https://mvnrepository.com/artifact/com.alibab ...

  3. Python和 pytest的异常处理

    Python中有自带的异常处理 try: except: pytest中 1.可以用try except来处理,来保证出错后,把后面的语句执行完成: 2.当有多条用例需要跑完时,不需要考虑其中一条用例 ...

  4. 【leetcode】756. Pyramid Transition Matrix

    题目如下: We are stacking blocks to form a pyramid. Each block has a color which is a one letter string, ...

  5. 洛谷P2786 英语1（eng1）- 英语作文

    题目背景 蒟蒻HansBug在英语考场上,挠了无数次的头,可脑子里还是一片空白. 题目描述 眼下出现在HansBug蒟蒻面前的是一篇英语作文,然而智商捉急的HansBug已经草草写完了,此时 他发现离 ...

  6. 解析crontab php自动运行的方法

    crontab是linux自带的一个命令 使php自动运行的方法php自动运行有很多方法,这里分以下DZ以及一些通过系统完成的方法和直接触发运行驻留系统的方法.Discuz后台有个计划任务,可以使ph ...

  7. xcode Delete current line

    Delete a line like eclipse CTRL+D (tested on Xcode 4.5.1) : First of all, change these rights : sudo ...

  8. SpringMVC·form表单Date类型问题导致的400问题

    问题描述 前端传yyyy-MM-dd hh:mm:ss格式的时间其实是String类型导致JavaBean中的Date类型Setter报错,从而导致api请求400. 问题解决 我的解决方式: 在对应 ...

  9. 8086汇编和Win32汇编

    8086汇编是指在某环境下汇编编译产生的程序,用机器去执行每条指令的长度为16位(可小于16),如DOS操作系统:WIN32汇编是32位环境下的汇编,如Windows(Windows也有64位的,XP ...

  10. 使用Guzzle执行HTTP请求

    Guzzle是一个PHP的HTTP客户端,用来轻而易举地发送请求,并集成到我们的WEB服务上.Guzzle提供了简单的接口,构建查询语句.POST请求.分流上传下载大文件.使用HTTP cookies ...