当前位置:首页 > 编程教程 > vue技术文章 > vue slots 组件的组合/分发实例

vue slots 组件的组合/分发代码内容

  • 发布时间:
  • 作者:码农之家
  • 点击:90

这篇文章主要知识点是关于vue、slots、组合、分发、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

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>

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

<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 组件的组合/分发实例

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 实例详解vue组件中点击按钮后修改输入框的状态
  • 最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 el-input id = usernames v-model=form.username v-bind:style = {disabled:isDisabled}/el-inputdata(){ return{ isDisabled:true }} 后来又想到使用jquery来改变属性,但是这个也没用……

  • 异步组件优化Vue应用程序性能的详解
  • 单页应用其一个问题是首屏屏渲染速度较慢。这是因为页面首次加载时服务器将向客户端发送大量JavaScript,在屏幕上显示任何内容之前必须下载并解析。可以想象,随着应用程序规模的扩大,这个问题对用户体验的影响也会越来越突出。 现在幸运的是,当使用Vue CLI构建Vue应用程序时(使用webpack),可以采取一些措施来抵消这种情况。在本文中,我将演示如何在应用程序的初始……

  • vue实现分页组件实例代码
  • 本文实例为大家分享了vue实现分页组件的具体代码,供大家参考,具体内容如下 template div class=pageBox ul li v-if=this.condition.pageNo 1 this.pages.length 4 class=sidesa @click=prePage()s class=font_main/s/a/li li v-for=(item, index) in pages :class={curtPage: condition.pageNo == item} a v-if=item @click=goPage(item) s{{item}}/s /a a href=javascript:; rel=external nofollow v-else.../a /li li class=sides v-if=condition.pageNo pageCount this.pageCount 4a @click=ne……

  • Vuejs 2.0 子组件访问/调用父组件示例代码
  • 有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: template div class=isShowing ref=isShowing div class=menu-wrapper ref=scroll_warpper v-show=!hid_show_switch ul ref=scroll_warpper_ul li class=menu-item @click=goToFatherDetail(233) /li /ul /div v-loading class=isloading v-show=hid_show_switch/v-loading /div /template script type=text/ecmascript-6 export default { methods: { goToFatherDetail (itemId) { // ……

  • 移动端滑动切换组件封装 vue-swiper-router
  • 具体代码如下所述: strong组件部分/strongtemplate div class=main div class=page-tab div :class=nowPath == item.path ? tab-item tab-item_active : tab-item v-for=(item, index) in tabList :key=index router-link mode=out-in :to=item.path{{item.name}} /router-link /div /div transition :name=slideDirection slot /slot /transition /div/templatescriptexport default { props: { tabList: Array }, mounted() { this.nowPath = this.$route.path; this.initTouchedEvent(); }, data() { return { tabSwiper……

    相关电子书
    学习笔记

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    版权投诉 / 书籍推广 / 赞助:QQ:520161757