Vue's slots enable you to define where content of a component should land when you define the content inside of a parent component. You can also name slots to arrange the elements however you'd like and allow your component to build it's own content around the content that will be placed.

main.js:

import Vue from 'vue'
import App from './App.vue' new Vue({
render: (h) => (
<App>
<h1 slot="header">This is header</h1>
<h2 slot="footer">This is footer</h2>
</App>
)
}).$mount('#app')

App.vue:

<template>
<section class="section">
<slot name='header'></slot> <hello-world message="Message from APP"></hello-world> <slot name='footer'></slot>
</section>
</template>

[Vue @Component] Place Content in Components with Vue Slots的更多相关文章

  1. [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component

    Components with slots can expose their data by passing it into the slot and exposing the data using  ...

  2. [Vue @Component] Handle Errors and Loading with Vue Async Components

    Because async components are not bundled with your app, they need to be loaded when requested. This ...

  3. vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明

    @Prop  父子组件之间传值 Install: npm install --save vue-property-decorator Child: <template> <div&g ...

  4. Vue.mixin Vue.extend(Vue.component)的原理与区别

    1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue. ...

  5. Vue Vue.use() / Vue.component / router-view

    Vue.use Vue.use 的作用是安装插件 Vue.use 接收一个参数 如果这个参数是函数的话,Vue.use 直接调用这个函数注册组件 如果这个参数是对象的话,Vue.use 将调用 ins ...

  6. [Vue @Component] Switch Between Vue Components with Dynamic Components

    A common scenario is to present different components based on the state of the application. Dynamic ...

  7. Vue报错之" [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component correctly? For recursive components, make sure to provide the "name" option."

    一.报错截图 [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component corre ...

  8. [Vue @Component] Extend Vue Components in TypeScript

    This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. ...

  9. [Vue @Component] Simplify Vue Components with vue-class-component

    While traditional Vue components require a data function which returns an object and a method object ...

随机推荐

  1. TCPClient、TCPListener的用法

    支持Http.Tcp和Udp的类组成了TCP/IP三层模型(请求响应层.应用协议层.传输层)的中间层-应用协议层,该层的类比位于最底层的Socket类提供了更高层次的抽象,它们封装 TCP 和 UDP ...

  2. CF848A From Y to Y

    思路1: 每次贪心地选择满足i * (i - 1) / 2 <= k最大的i并从k中减去i * (i - 1) / 2,直至k为0.由于函数x * (x - 1) / 2的增长速度比2x要慢,所 ...

  3. 全志tina v3.0系统编译时的时间错误的解决(全志SDK的维护BUG)

    全志tina v3.0系统编译时的时间错误的解决(全志SDK的维护BUG) 2018/6/13 15:52 版本:V1.0 开发板:SC3817R SDK:tina v3.0 1.01原始编译全志r1 ...

  4. python生成excel文件

    2018-04-1919:04:25 测试代码如下: import openpyxl import datetime wb = openpyxl.Workbook() ws = wb.active w ...

  5. apache启动失败提示预期<IfModule>结果<IfModule>>

    经过反复查看httpd.conf文件,发现原因是启动了两遍<IfModule>,也就是出现内容重复标签重复曾经遇到类似的情况Apache2: Expected </> but ...

  6. Vue指令6:v-show

    根据表达式的真假值来渲染元素 用法大致一样: <h1 v-show="ok">Hello!</h1> 不同的是带有 v-show 的元素始终会被渲染并保留在 ...

  7. 以POST方式推送JSON数据,并接收返回的服务器消息

    private static string GetResult(string jsonString, string type) { string url = GetUrl(type); string ...

  8. 初步认识MVC

     一丶路由(One) 自定义路由,静态路由,动态路由,组合路由 routes.MapRoute 二丶Action向View传值的四种方式(ViewData.ViewBag.TempData.Model ...

  9. 【 jquery 】常用

    $("#input1").show('slide');    渐进显示$("#input1").hide('slide');     渐进隐藏 siblings ...

  10. 小程序 textarea ios兼容解决

    今天遇到,在小程序里textarea会存在一定的兼容性问题,textarea有默认的内边距,在安卓和ios显示的时候,ios边距会比安卓的大很多. 解决办法: 通过 wx.getSystemInfoS ...