大白话vue——slot的作用与使用

这篇内容本来是不打算放在首页上的,因为内容实在是比较简单,但是在查找slot的使用讲解时发现相关的讲解比较少,要么像官方文档一样简单讲解(看过任然一脸懵逼),也许是自己理解能力比较差...所以在此讲述记录吧

言归正传,且看正文讲解

在看官网对slot的解释中,出现次数最多的是“插槽”,如果想象成物体,也就是说slot是一个可以插入的槽口,比如插座的插孔。那么slot的作用是什么呢?

先来看下面的例子

//slot组件<template>
  <div class="slots">
      slot的用法
      <SlotChild>
          <div class="no-name">我是嵌在子组件内不具有属性名的标签</div>
      </SlotChild>
  </div>
</template>

<script>
import SlotChild from ‘component/slotChild‘
export default {
    name: ‘slots‘,
    components:{
        SlotChild
    },
    data () {
        return {

        }
    }
}
</script>
//slot的子组件<template>
  <div class="slot-child">
      我是slot的子组件
  </div>
</template>

<script>
export default {
  name: ‘slotChild‘,
  data () {
    return {

    }
  }
}
</script>

页面渲染效果

通过上面的内容可以知道,在slot组件中引入了slot的子组件,而且又在子组件标签内添加了新的标签内容,但页面上并没有将子组件标签内的标签内容显示出来,

所以说在不适用slot的情况下,在子组件标签内添加Dom是无效的

现在来修改slot的子组件

<template>
  <div class="slot-child">   //在子组件中添加slot标签
      <slot></slot>
      我是slot的子组件
  </div>
</template>

<script>
export default {
  name: ‘slotChild‘,
  data () {
    return {

    }
  }
}
</script>

页面效果图

由此可见,使用slot后可以在子组件内显示插入的新标签

这里只是讲述了slot的简单用法,slot的具名并没有讲到,并不难尝试着写写就可以,关键是要动手敲,光看是没法深刻理解的

原文地址:https://www.cnblogs.com/weichen913/p/9297399.html

时间: 2024-10-08 01:08:46

大白话vue——slot的作用与使用的相关文章

vue slot

一般我发现slot都是用在子组件 不知道对不对,不对的请留言指教 ,谢谢谢谢 使用slot场景一: 子组件Minput.vue <input type='text'/> 父组件 Minput <Minput>可以显示吗</Minput> 这种情况下  Minput标签内的文字是不会渲染出来的 如果现在想在里面把文字渲染出来怎么办 好 用slot 子组件 <input type='text'/> <slot></slot> 这样的话,父

[Vue @Component] Pass Props Between Components with Vue Slot Scope

Components with slots can expose their data by passing it into the slot and exposing the data using slot-scope in the template. This approach allows you to pass props down from Parent components to Child components without coupling them together. For

vue slot插槽的使用方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> </head> <

vue slot介绍

slot(插槽)属性是vue中比较常用的功能,主要分为:匿名插槽,具名插槽,作用域插槽.下面分别简单介绍下 一.匿名插槽 child.vue: <div> <h3>标题</h3> <slot></slot> </div> parent.vue: <child> <p>插槽内容</p> </child> 渲染结果: <div> <h3>标题</h3> &

vue slot的使用

slot的说明就看vue的官方文档 第一次使用slot  练习的一个小例子 最先编码的时候没有做到上下收缩,只能是列表式的,如下图 代码: <p class="title" style="text-align:left;font-weight:bold">特有属性</p> <div class="param-gap"> <label class="left" for="&qu

Vue slot 插槽

Vue  的插槽感觉上是一个组件函数,和函数一样进行参数的传递来改变组件的据题内容. 使用指令:v-slot //插口的基本使用 <body> <div id="app"> <!-- 传入元素参数 --> <login><span>demo</span></login> </div> </body> <template id="login"> &l

vue Slot理解

简介 插槽:简单理解就是组件内部留一个或多个的插槽位置,可供组件传对应的模板代码进去.插槽的出现,让组件变的更加灵活. 一.匿名插槽 // 组件(父) <my-component> <p>hello,world!</p> </my-component> // 组件内部(子) <div class="child-page"> <h1>子页面</h1> <slot></slot> /

vue自学入门-4(vue slot)

好长时间没有用vue了,从新安装vue脚手架. 1.从新安装webpack cnpm install --save-dev webpack 2.vue init webpack my-project-slot 3.进入目录 cnpm install 4.cnmp run dev 启动成功 5.router-view 部分会被替换成HelloWorld.vue内容 6.修改helloworld.vue内容如下 <template> <div class="hello"&

436 vue slot:插槽基本使用,具名插槽,作用域插槽

1. 插槽 : 替换内容 / 分发内容 (1)占位,像出口<router-view></router-view>. (2)没有新的内容放进来,就用默认的. (3)<slot></slot>将被替换成组件内的对应子节点. 2. 基本使用 <el-car> <div>宝马发动机</div> </el-car> 组件的内部 02-插槽的基本使用.html <!DOCTYPE html> <html