vue slots 组件的组合/分发实例

使用slots 分发内容

使用组件时常常会有组件组合使用的情况，如下：

<componentA>
<componentB></componentB>
<componentC></componentC>
</componentA>

直接套用组件的话，父级组件会将子级组件覆盖掉，不能实现需求的效果，为了实现该效果就需要使用 slots来内容分发

slots的使用方法如下：

<body>
 <div id="app">
 <app>
  <child></child>
  <child2></child2>
 </app>
 </div>
 </body>
 <script>
  Vue.component('app',{
  template:'\
 <div>\
  <slot>没有则显示这个</slot>\
  <li>111</li>\
  <li>222</li>\
  <li>333</li>\
 </div>\
 ',
  })
  var app=new Vue({
  el:'#app',
  components:{
  'child':{
   template:'<div>hello word</div>'
  },
  'child2':{
   template:'<div>hello vue js</div>'
  }

  }

  })
 </script>

<app></app>标签没有引入其他组件时显示为图1，有其他组件时显示为图2

同时可以实测到可以引入多个并列的组件，组件会依次显示

但是这只能解决单个 组件的引入 ，实际应用中需要多个应用的组件会在多个位置，为了解决这个问题，就得确定slot位置的唯一性为了确定slot 的vue 中可以给slot 添加行内 name来识别 ，

需要注意的是：同一父级下的slot 添加行内 name必须保证唯一；

子组件下的slot 的name 是可以与父级组件的slot name 重复的，及每一级具有相对独立性。

代码效果图如下：

<body>
 <div id="app">
 <app>
  <child slot="slot1">

  </child>

  <div slot="slot2">How to use slot?</div>

 </app>
 </div>
 </body>
 <script>
  Vue.component('app',{
  template:'\
 <div>\
  <slot name="slot1">没有则显示这个</slot>\
  <li>111</li>\
  <li>222</li>\
  <slot name="slot2">没有则显示这个</slot>\
  <li>333</li>\
 </div>\
 ',
  })
  var app=new Vue({
  el:'#app',
  components:{
  'child':{
   template:'<div>hello word\
    <li>22222</li>\
   </div>'
  },
  'child2':{
   template:'<div>hello vue js</div>'
  }

  }

  })
 </script>

以上这篇vue slots 组件的组合/分发实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vuejs第十一篇组件之slot内容分发实例详解

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <

  • vue如何使用 Slot 分发内容实例详解

    vue如何使用 Slot 分发内容实例详解

    vue我自己还在摸索学习中,今天学习了使用 Slot 分发内容,给自己留个小笔记 使用slot分发内容我们要注意2点 <app> 组件不知道它会收到什么内容.这是由使用 <app> 的父组件决定的. <app> 组件很可能有它自己的模板. 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板. [案例] <!DOCTYPE html> <html lang="en"> <head> <me

  • vue组件详解之使用slot分发内容

    vue组件详解之使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot , 这个过程叫作内容分发( transclusion ). 注意两点: 1.< app>组件不知道它的挂载点会有什么内容.挂载点的内容是由<app >

  • vue slots 组件的组合/分发实例

    使用slots 分发内容 使用组件时常常会有组件组合使用的情况,如下: <componentA> <componentB></componentB> <componentC></componentC> </componentA> 直接套用组件的话,父级组件会将子级组件覆盖掉,不能实现需求的效果,为了实现该效果就需要使用 slots来内容分发 slots的使用方法如下: <body> <div id="app

  • vue router 组件的高级应用实例代码

    1 动态设置页面标题 页面标题是由 <title></title> 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的.必须通过 JavaScript 来修改 <title></title> 中的内容: window.document.title ='xxx' 有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中,通过 JavaScript 来修改 <title></title>

  • vue兄弟组件传递数据的实例

    在main.js里面设置data{eventHub:new Vue() } new Vue({ el: '#app', router, store, template: '<App/>', components: { App }, data:{ eventHub:new Vue() // 在main.js设置所有组件都能用调用 }, }) 我们再组件一设置一个事件调用组件二的事件,传递数据给组件二 <template> <div v-on:click="on()&q

  • Vue父子组件之间的通信实例详解

    在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 一.父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).vue提倡单项数据流,因

  • vue父子组件的通信方法(实例详解)

    一.父组件向子组件传递数据 1.首先形成父子组件关系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body>

  • 详解Vue学习笔记入门篇之组件的内容分发(slot)

    详解Vue学习笔记入门篇之组件的内容分发(slot)

    介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ message }} </child-component> mess

  • Vue.js组件使用开发实例教程

    组件 组件可以扩展HTML元素,封装可重用的代码,在较高的层面上,组件是自定义元素,vue.js的编译器为它添加特殊功能,在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. Vue.js的组件可以理解为预先定义好了行为的ViewModel类.一个组件可以预定义很多选项,但最核心的是以下几个: 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据(data):一个组件的初始数据状态.对于可复用的组件来说,这通常是私有的状态. 接受的外部参数(p

  • Vue函数式组件的应用实例详解

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1.以局部组件为例,将组件标记为functional=ture; 因为函数式没有实例,因此组件需要的一切都是通过context参数传递,它是一个包括如下字段的对象: props:提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数,返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象.也

  • 详解Vue组件之间的数据通信实例

    详解Vue组件之间的数据通信实例

    最近在用vue做项目,学习了不少东西,但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得,因为是新手,所以可能会有错误的地方,欢迎指出和交流呀~~~ 关于父子组件以及非父子组件之间的数据通信 1 父子组件之间数据通信 一般父组件向子组件传递数据用prop进行传递,注意,子组件不能对prop中的数据进行更改,vue中规定是防止子组件对父组件中的数据进行窜改.而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递.(是不是有点懵逼了,看个例子吧 ) (这里我就直接

随机推荐