精华内容
下载资源
问答
  • vue组件-属性插槽
    2021-07-29 09:42:32

    1 item.vue:(子组件)

    <template>
      <div class="item" :class={active:isActive} @click="handleClick">
        <slot></slot>
      </div>
    </template>
    
    <script>
    export default {
      props:{
        isActive:{
          type:Boolean,//约束该属性的类型为Boolean
          required:true,//约束该属性必须要传递
        }
      },
      methods:{
        handleClick(){
          this.$emit("active");
        }
      }
    }
    </script>
    
    <style scoped>
    .item{
      cursor:pointer;
      width:100%;
      height:100%;
    }
    .item:hover{
      background:#d6d4d4;
      transition:1s;/* 样式在一秒内完成 */
    }
    .active{
      background:#e7e7e7;
    }
    </style>

    2 TitleMenu.vue:(父组件)

    <template>
    <div class="menu-title"><!--具名插槽-->
      <Item :isActive="isActive" @active="$emit('active')">
        <div class="item-list">
            <div class="left">
              <slot name= "title">
              </slot>
            </div>
            <div class="right">
              <slot name="icon"></slot>
            </div>
        </div>
      </Item>
    </div>
      
    </template>
    
    <script>
    import Item from "./item"
    export default {
      props:{
        isActive:{
          type:Boolean,
          default:false
        }
      },
      components:{
        Item
      }
    }
    </script>
    
    <style>
    .menu-title{
      width:100%;
      height:46px;
      line-height:46px;
    }
    .item-list{
      padding:0 20px;
    }
    .left{
      float:left;
      color:#212121;
      font-size:16px;
    }
    .right{
      float:right;
      font-size:12px;
      color:#999;
    }
    </style>

    3.App.vue:

    <template>
    <div>
        <TitleMenu :isActive="select" @active="select = true">
            <template v-slot:title>
                <!--给title具名插槽传递内容-->
                发现频道
            </template>
            <template v-slot:icon>
                >
            </template>
        </TitleMenu>
    </div>
    </template>
    <script>
    import TitleMenu from "./components/TitleMenu";
    export default{
        components:{
            TitleMenu,
        },
        data(){
            return{
                select:false
            }
        },
        methods:{
            
        }
    }
    </script>
    <style scoped>
    
    </style>
    

    更多相关内容
  • 今天小编就为大家分享一篇vue中的 $slot 获取插槽的节点实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue组件插槽

    2020-11-08 20:03:40
    普通页面元素是有属性和内容的,在vue中我们通过prop让组件拥有了属性,那么这篇内容我们来了解一下怎么给组件添加内容
    普通页面元素是有属性和内容的,在vue中我们通过prop让组件拥有了属性,那么这篇内容我们来了解一下怎么给组件添加内容

    默认插槽

        <div id="app">
            <post-item>控件的值是通过组件的插槽传递过去的</post-item>
        </div>
    
        <script>
            Vue.component('PostItem', {
                template: '<h3><slot></slot></h3>'
            })
            let vm = new Vue({
                el: "#app",
            })
        </script>
    

    在上述案例中,组件模板中<h3>元素中使用了一个 <slot> 元素,这个元素就是插槽,也可以理解为占位符。在父组件中给这个占位符添加内容,就出现了下列效果

    在这里插入图片描述

    插槽的作用域和插槽的默认值

        <div id="app">
            <!-- <post-item>控件的值是通过组件的插槽传递过去的</post-item> -->
            <post-item></post-item>
            <post-item>{{ val }}</post-item>
        </div>
        <script>
            Vue.component('PostItem', {
                template: '<h3><slot>这个是插槽的默认值</slot></h3>'
            })
            let vm = new Vue({
                el: "#app",
                data: {
                    val: '这个是通过插槽动态传递过去的'
                }
            })
        </script>
    

    如果通过插槽动态传递参数,动态参数是在父组件的作用域下解析的,而不是在子组件的作用域。除了动态传递参数,还可以给插槽定义一个默认参数。

    在这里插入图片描述

    命名插槽

    在组件中,可以会使用到多个插槽,所以可以给插槽进行命名。

    <div id="app">
            <post-item>
                <template v-slot:item1>这个是通过命名插槽item1传递的</template>
                <template v-slot:default>这个是通过默认插槽传递的</template>
                <template #item2>这个是通过命名插槽item2传递的,这个v-slot指令是缩写语法</template>
            </post-item>
    
        </div>
        <script>
            Vue.component('PostItem', {
                template: `<div>
              <slot name='item1'></slot></br>
              <slot></slot></br>
              <slot name='item2'></slot>
                </div>`
            });
            let vm = new Vue({
                el: "#app",
    
            })
        </script>
    

    在组件中给<slot>元素添加name属性来给插槽命名,在使用组件的时候通过给<template>元素添加v-slot指令。如果是不对插槽进行命名,则表示为默认插槽,默认插槽可以不使用<template>元素,也可以通过给<template>元素添加v-slot:defaultv-slot

    v-slot指令只能在<template>元素或组件上使用,且可以通过#替换v-slot

    在这里插入图片描述

    展开全文
  • vue动态组件插槽

    2022-04-12 23:02:15
    组件进阶 组件进阶 - 动态组件 目标: 多个组件使用同一个挂载点,并动态切换,这就是动态组件、 组件进阶 - 组件缓存 ...演示2: 使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁 语法: ​ V

    组件进阶

    组件进阶 - 动态组件

    目标: 多个组件使用同一个挂载点,并动态切换,这就是动态组件、

    组件进阶 - 组件缓存

    目标: 组件切换会导致组件被频繁销毁和重新创建, 性能不高

    使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁

    演示1: 可以先给UserName.vue和UserInfo.vue 注册created和destroyed生命周期事件, 观察创建和销毁过程

    演示2: 使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁

    语法:

    ​ Vue内置的keep-alive组件 包起来要频繁切换的组件

    补充生命周期:

    • activated - 激活
    • deactivated - 失去激活状态

    总结: keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法

    组件进阶 - 激活和非激活

    目标: 被缓存的组件不再创建和销毁, 而是激活和非激活

    补充2个钩子方法名:

    ​ activated – 激活时触发

    ​ deactivated – 失去激活状态触发

    组件进阶 - 组件插槽

    目标: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

    vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽

    组件进阶 - 插槽默认内容

    目标: 如果外面不给传, 想给个默认显示内容

    夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用夹着的内容在原地显示

    <slot>默认内容</slot>
    

    组件进阶 - 具名插槽

    目标: 当一个组件内有2处以上需要外部传入标签的地方

    传入的标签可以分别派发给不同的slot位置

    要求: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

    v-slot可以简化成#使用

    v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#

    总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

    组件进阶 - 作用域插槽

    目标: 子组件里值, 在给插槽赋值时在父组件环境下使用

    复习: 插槽内slot中显示默认内容

    例子: 默认内容在子组件中, 但是父亲在给插槽传值, 想要改变插槽显示的默认内容

    1. 子组件, 在slot上绑定属性和子组件内的值
    2. 使用组件, 传入自定义标签, 用template和v-slot=“自定义变量名”
    3. scope变量名自动绑定slot上所有属性和值

    自定义指令

    自定义指令文档

    除了核心功能默认内置的指令 (v-modelv-show),Vue 也允许注册自定义指令。 v-xxx

    html+css的复用的主要形式是组件

    你需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令

    自定义指令-注册

    目标: 获取标签, 扩展额外的功能

    局部注册和使用

    目标: 创建 “自定义指令”, 让输入框自动聚焦
    // 1. 创建自定义指令
    // 全局 / 局部
    // 2. 在标签上使用自定义指令 v-指令名
    // 注意:
    // inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
    // update方法 - 指令对应数据/标签更新时, 此方法执行

    全局注册

    在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用指令

    展开全文
  • vue 组件插槽 slot

    2021-12-23 16:57:42
    vue 组件插槽 slot

    插槽 - 创建

    1. 简介:让组件内可以接收不同的标签显示

    效果

    在这里插入图片描述

    步骤

    1. 先在组件内用 slot 占位
    2. 使用组件时,传入具体标签插入
    3. 过程:传入的标签会替换掉 slot 显示

    代码

    在这里插入图片描述

    // Pannel.vue
    <template>
      <div>
        <!-- 按钮标题 -->
        <div class="title">
          <h4>Slot - 展示插槽</h4>
          <span class="btn" @click="isShow = !isShow">{{ isShow ? "收起" : "展开" }}</span>
        </div>
        <!-- 下拉内容 -->
        <div class="container" v-show="isShow">
          <slot></slot>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          isShow: false,
        }
      },
    };
    </script>
    
    // UseSlot.vue
    <template>
      <div id="container">
        <div id="app">
          <Pannel>
            <img src="../assets/fight.gif" alt />
            <span>加油,把公司干倒!</span>
          </Pannel>
          <Pannel>
            <p>加油,把公司干倒!</p>
            <p>加油,把公司干倒!</p>
            <p>加油,把公司干倒!</p>
            <p>加油,把公司干倒!</p>
          </Pannel>
        </div>
      </div>
    </template>
    
    <script>
    import Pannel from '../components/Pannel.vue'
    export default {
      components: {
        Pannel
      }
    };
    </script>
    

    插槽 - 显示默认内容

    • 需求:不给组件传标签
    • 效果:<slot>内放置内容,作为默认显示内容;给组件内传标签,则slot整体被换掉

    效果

    在这里插入图片描述

    代码

    在这里插入图片描述

    // Pannel.vue
    <template>
      <div>
        <!-- 按钮标题 -->
        <div class="title">
          <h4>Slot - 展示插槽</h4>
          <span class="btn" @click="isShow = !isShow">{{ isShow ? "收起" : "展开" }}</span>
        </div>
        <!-- 下拉内容 -->
        <div class="container" v-show="isShow">
          <slot>默认显示的内容</slot>
        </div>
      </div>
    </template>
    
    // UseSlot.vue
    <template>
      <div id="container">
        <div id="app">
          <Pannel>
            <img src="../assets/fight.gif" alt />
            <span>加油,把公司干倒!</span>
          </Pannel>
          <Pannel>
            <p>加油,把公司干倒!</p>
            <p>加油,把公司干倒!</p>
            <p>加油,把公司干倒!</p>
            <p>加油,把公司干倒!</p>
          </Pannel>
          <Pannel></Pannel>
        </div>
      </div>
    </template>
    

    插槽 - 具名插槽

    效果

    在这里插入图片描述

    步骤

    1. slot 使用 name 属性区分名字
    2. template 配合 v-slot: 名字来分发对应标签
    3. v-slot:可以简化成#

    代码

    // Pannel.vue
    <template>
      <div>
        <!-- 按钮标题 -->
        <div class="title">
          <slot name="title"></slot>
          <span class="btn" @click="isShow = !isShow">{{ isShow ? "收起" : "展开" }}</span>
        </div>
        <!-- 下拉内容 -->
        <div class="container" v-show="isShow">
          <slot name="content"></slot>
        </div>
      </div>
    </template>
    
    // UseSlot.vue
    <template>
      <div id="container">
        <div id="app">
          <Pannel>
            <template v-slot:title>
              <h4>slot - 具名插槽</h4>
            </template>
            <template v-slot:content>
              <img src="../assets/fight.gif" alt />
              <span>加油,把公司干倒!</span>
            </template>
          </Pannel>
          <Pannel>
            <template #title>
              <span style="color: red">支付宝扫一扫领红包</span>
            </template>
            <template #content>
              <img src="../assets/2.png" alt />
            </template>
          </Pannel>
        </div>
      </div>
    </template>
    

    插槽 - 插槽作用域

    • 需求:使用插槽时,想使用子组件内变量

    效果

    在这里插入图片描述

    步骤

    1. 子组件,在 slot上 绑定属性和子组件内的值
    2. 使用组件,传入自定义标签,用 template 和 v-slot=“自定义变量名”
    3. scope 变量名自动绑定 slot 上所有属性和值( scope = {row: defaultObj} )

    代码

    在这里插入图片描述

    // Pannel.vue
    <template>
      <div>
        <!-- 按钮标题 -->
        <div class="title">
          <slot name="title">使用组件内的变量</slot>
          <span class="btn" @click="isShow = !isShow">{{ isShow ? "收起" : "展开" }}</span>
        </div>
        <!-- 下拉内容 -->
        <div class="container" v-show="isShow">
          <slot :zsq="defaultObj">{{defaultObj.defaultOne}}</slot>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          isShow: false,
          defaultObj: {
            defaultOne: "我是 - defaultOne",
            defaultTwo: "259-aaa"
          },
        }
      },
    };
    </script>
    
    // UseSlot.vue
    <template>
      <div id="container">
        <div id="app">
          <h4>slot - 插槽作用域</h4>
          <Pannel>
            <!-- 需求:插槽时,使用组件内变量 -->
            <!-- zsqaaa变量:zsq:defaultObj -->
            <template v-slot="zsqaaa">
              <p>{{zsqaaa.zsq.defaultTwo}}</p>
            </template>
          </Pannel>
        </div>
      </div>
    </template>
    
    <script>
    import Pannel from '../components/Pannel.vue'
    export default {
      components: {
        Pannel
      }
    };
    </script>
    

    插槽作用域 - 具体使用

    组件内标签可以随意定义和数据使用

    效果

    在这里插入图片描述

    代码

    在这里插入图片描述

    // MyTable.vue
    <template>
      <div>
        <table border="1">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>博客</th>
              <th>地址</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in arr" :key="index">
              <td>{{index + 1}}</td>
              <td>{{item.name}}</td>
              <td>{{item.age}}</td>
              <td>{{item.imgUrl}}</td>
              <td>
                <slot :zsq="item">
                  <!-- 默认值给上,如果使用组件不自定义标签显示默认文字 -->
                  {{item.url}}
                </slot>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        arr: Array
      }
    }
    </script>
    
    // UseTable.vue - HTML
    <template>
      <div>
        <MyTable :arr="list"></MyTable>
        <MyTable :arr="list">
          <!-- row: {zsq: item} -->
          <template v-slot="row">
            <a :href="row.zsq.url">点击我:{{row.zsq.url}}</a>
          </template>
        </MyTable>
        <!-- <MyTable :arr="list">
          <template v-slot="row">
            <img :src="row.zsq.imgUrl" alt />
          </template>
        </MyTable> -->
      </div>
    </template>
    
    // UseTable.vue - JavaScript
    <script>
    import MyTable from '../components/MyTable.vue'
    export default {
      components: {
        MyTable
      },
      data () {
        return {
          list: [
            {
              name: "259-aaa",
              age: 22,
              imgUrl: "https://img-home.csdnimg.cn/images/20201124032511.png",
              url: "https://blog.csdn.net/qq_44680550",
            },
            {
              name: "55",
              age: 25,
              imgUrl: "https://img-home.csdnimg.cn/images/20201124032511.png",
              url: "https://blog.csdn.net/qq_44680550",
            },
            {
              name: "zsq",
              age: 99,
              imgUrl: "https://img-home.csdnimg.cn/images/20201124032511.png",
              url: "https://blog.csdn.net/qq_44680550",
            },
          ],
        }
      }
    }
    </script>
    
    展开全文
  • vue 组件进阶-插槽

    2021-11-22 22:22:26
    vue 提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽 语法口诀: 组件内用占位 使用组件时夹着的地方, 传入标签替换 slot 总结: 组件内容分发技术, slot 占位, 使用组件时传入替换 slot 位置...
  • Vue 组件插槽

    2020-07-10 11:07:20
    Vue 组件 组件是一个可复用的 Vue 实例且带有一个名字,所以要接收和 new Vue 相同的选项,例如 data 、methods 、computed 以及生命钩子函数等。 注意: 组件是一个全新的 Vue 实例,组件内部的选项不会相互影响。...
  • vue插槽属性的练习

    2020-01-09 11:14:34
    所谓插槽属性,就是在插槽上面绑定的属性 原先的slot-scope已经废弃了,下面使用的是v-slot 先定义一个带有插槽的子组件,且插槽上面有属性 <template> <div> <div> ...
  • 1. 动态组件 动态组件指的是动态切换组件的显示与隐藏。...include 属性用来指定:只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔: <keep-alive include="MyRight"> <component :is="co
  • vue组件属性Props

    2020-12-24 12:52:41
    组件属性和事件父子组件之间的通信父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息。比如,子组件需要某个数据,就在内部定义...
  • vue父子组件slot插槽

    千次阅读 2019-11-05 16:37:04
    关于父组件在使用子组件的时候,向子组件插入内容的方法 1 创建一个子组件,并在vue实例中注册 这是创建子组件 var testzujian = { template:`<div> <span>这是子组件的内容</span> </div&...
  • Vue3获取组件插槽中子组件索引(自定义步骤条) 功能需求 该图是element-plus的一些步骤条样式,我的需求是每一个步骤条可以点击后跳转到对应的页面,且标题需要和数字水平排列,另外还需自定义每个步骤条的样式,...
  • Vue组件基础Vue组件概述 Vue组件 概述 vue中的组件个人理解就是创建一个标签,名字有自己决定。组件是可复用的vue实例,在开发中我么可以将经常重复使用的功能封装为组件,达到快捷便捷开发的目的。 ...
  • 在开发中需要一个公共组件Tree(树),接受的数据是典型的树结构数据,当前项数据是 一个对象,如果有子节点,拥有一个children属性。我并不希望每一项的数据展现形式是定死的,而是通过插槽能够自定义。 假设: ...
  • 通常,如果在A组件中 使用 了B组件,那么就称A组件为B组件的子组件,响应地,B组件就称为A组件的子组件。 <!-- A组件 --> <template> <div> <!-- 3、使用 --> <B></B> <...
  • 文章目录一、组件注册1....一、组件注册 组件就是把各自独立的积木拼成一个整体进行数据交互 ... Vue.component('组件名称', { data: function () {return{}}, // data 在这里是函数 template: '模板' }) 就是相当于封
  • Vue组件化之插槽

    2020-12-23 19:07:35
    slot插槽的基本使用类似电脑的usb,使用接口给电脑增加不同的功能,键盘/音响,而不是直接在组件里添加介绍:默认自定义标签内不允许添加内容,而插槽可以让我们在内部添加内容封装方法:抽取共性,保留不同。...
  • VUE组件插槽slot与可复用组件

    千次阅读 2019-10-30 19:11:38
    插槽概念在Vue中十分重要 在很多第三方的Vue模块或插件中都会大量使用插槽 作用:通过插槽slot可以更加...父组件通过属性形式向子组件传值,即父传子借助props属性向下传值 如果不想被转义,接下来需要借助v-htm...
  • Vue组件通信及slot插槽

    2021-11-17 20:58:11
    组件无法直接使用父组件的data数据,但是可以通过prop属性获取并使用 1.父组件作用域中使用子组件时 给子组件标签上绑定要使用的父组件数据属性 2.子组件内部设置props 注册属性 props可以是数组或对象 例如 ...
  • 插槽(slot) 是vue的一个内置组件,通过插槽,可以把自己想要的内容插入到组件的某个位置,有了插槽,可以让组件有更强的通用性。比如:子组件 A 位置默认显示文字,但是我们想在不同的组件内引用时,让 A 组件显示...
  • Vue组件插槽使用

    2019-10-24 18:51:26
    文章目录表单text 和 textreacheckbox 和radioselectcomputed与watchcomputedwatch组件组件的注册Vue.component()全局组件与局部组件dataprops组件的通信$emit()组件双绑的实现v-model.sync (处理多个prop外部绑定...
  • 1. vue组件的通信:包括子通父,父通子,兄弟通信,祖代与后代通信,vuex全局状态管理。 1.1 父向子通信:props属性和refs属性。 1.1.1props属性: //在子组件中 props:{ age: { type: Number, //父组件传递...
  • 组件 AshesInfo是data里的属性 <slot :scope="AshesInfo"></slot> 父组件 row是获取的AshesInfo <ashesAdds> <template v-slot="row"> <div class="div_button" @click=...
  • 定义全局组件 方法一
  • Vue组件初始化,父子组件传值,插槽组件初始化父子组件传值插槽 组件初始化 组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来...
  • 组件 组件的使用 局部注册: ① 步骤: 引入组件:import 组件别名 from ‘组件路径’ 注册:components:{组件别名}(在components中可以写成:页面使用别名:组件别名的形式。此时第三步,在页面使用时应该为<...
  • vue2中插槽的讲解—详细,vue3中延续了vue2.6.0以后的用法
  • vue插槽

    2022-04-04 09:19:18
    官方解释:插槽就是vue实现的一套内容分发的API,将元素作为承载分发内容的出口 通俗解释:想要在一个组件标签中,加入一些内容,那就必须要在组件内声明slot元素,否则不会被渲染 一、默认插槽组件想要引入组件中...
  • Vue 版本:2.6.11,过期的API就不在这里进行赘述了。 后记 如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O??? 如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*// 如果你想要和...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,678
精华内容 3,071
关键字:

vue组件获取插槽的属性