vue--插槽

已于 2022-07-10 10:31:47 修改
阅读量316 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-07-10 09:48:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43470725/article/details/125702271
版权

1、默认插槽

直接在组件中写结构，传入组件中

<Category title="美食">
        <img 
        src="https://img1.baidu.com/it/u=3003020177,2948003422&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" 
        alt="">
      </Category>
      <Category title="游戏">
          <ul>
            <li v-for="(item,index) in games" :key="index">{{item}}</li>
          </ul>
      </Category>
      <Category title="电影">
        <meta name=referrer content=no-referrer>
        <video controls src="http://vfx.mtime.cn/Video/2019/03/12/mp4/190312083533415853.mp4"></video>
      </Category>

< slot>标签

<template>
    <div class="category">
       <h3>{{title}}分类</h3>
       <!-- 挖个坑，等着组件的使用者进行填充 -->
       <slot>默认值，当使用者没有传递具体结构时，会显示</slot>
    </div>    
</template>

category组件

<template>
    <div class="category">
       <h3>{{title}}分类</h3>
       <!-- 挖个坑，等着组件的使用者进行填充 -->
       <slot>默认值，当使用者没有传递具体结构时，会显示</slot>
    </div>    
</template>

<script>
    export default{
        name:'Category',
        props:['title']
    }
</script>

<style scoped>
    .category{
        background-color: skyblue;
        width:200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    img{
        width: 100%;
    }
</style>

app组件

<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <School :getSchoolName="getSchoolName"/>
    <!-- <Student v-on:atguigu="getStudentName"/> -->
    <Student ref="student"/>
    <!-- vue中借助ruoter-link 标签实现路由的切换 -->
    <!-- <router-link active-class="active" to='/about'>About</router-link> -->
    <router-link active-class="active" :to="{name:'guanyu'}">About</router-link>
    <br/>
    <router-link active-class="active" to="/home">Home</router-link>

    <div class="router_view">
      <router-view></router-view>
    </div>
    <button @click="getHome">获取主页信息</button>
    <div class="container">
      <Category title="美食">
        <img 
        src="https://img1.baidu.com/it/u=3003020177,2948003422&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" 
        alt="">
      </Category>
      <Category title="游戏">
          <ul>
            <li v-for="(item,index) in games" :key="index">{{item}}</li>
          </ul>
      </Category>
      <Category title="电影">
        <meta name=referrer content=no-referrer>
        <video controls src="http://vfx.mtime.cn/Video/2019/03/12/mp4/190312083533415853.mp4"></video>
      </Category>
    </div>
  </div>
</template>

<script>
import School from './components/School'
import Student from './components/Student'
import axios from 'axios'
import Category from './components/Category'

export default {
  name: 'App',
  components: {
    School,
    Student,
    Category
  },
  data(){
    return{
      msg:'你好！',
      foods:['火锅','烧烤','小龙虾','牛排'],
      games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
      films:['《教父》','《拆弹专家》','《你好，李焕英》','《猪猪侠》'],
    }
  },
  methods:{
    getSchoolName(name){
      console.log('app收到了schoole的数据：',name)
    },
    getStudentName(name){
      console.log('app收到了student的数据：',name)
    },
    demo(){
      console.log('demo绑定')
    },
    getHome(){
      axios.get('http://localhost:8080/proxy/home/getHome').then(
        response => {
          console.log('请求成功了',response.data)
        },
        error => {'请求失败了',error.msg}
      )
    }

  },
  mounted(){
    this.$refs.student.$on('atguigu',this.getStudentName)
    this.$refs.student.$on('demo',this.demo)
  }
}
</script>

<style>
  .app{
    background-color: bisque;
  }
  .router_view{
    background-color: aliceblue;
  }
  .container{
    display: flex;
    justify-content: space-around;
  }
  video{
    width: 100%;
  }
</style>

2、具名插槽

当使用多个插槽时，想给不同位置，分别添加不同的结构

<template>
    <div class="category">
       <h3>{{title}}分类</h3>
       <!-- 挖个坑，等着组件的使用者进行填充 -->
       <slot name="center">默认值，当使用者没有传递具体结构时，会显示1</slot>
       <slot name="footer">默认值，当使用者没有传递具体结构时，会显示2</slot>
    </div>    
</template>

<div class="container">
      <Category title="美食">
        <img
          slot="center"
          src="https://img1.baidu.com/it/u=3003020177,2948003422&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
          alt
        />
        <a slot="footer" href>更多美食</a>
      </Category>
      <Category title="游戏">
        <ul slot="center">
          <li v-for="(item,index) in games" :key="index">{{item}}</li>
        </ul>
        <div class="foot" slot="footer">
          <a href>单机游戏</a>
          <a href>网络游戏游戏</a>
        </div>
      </Category>
      <Category title="电影">
        <meta name="referrer" content="no-referrer" />
        <video
          slot="center"
          controls
          src="http://vfx.mtime.cn/Video/2019/03/12/mp4/190312083533415853.mp4"
        ></video>
        <!-- <template slot="footer"> -->
          <!-- 当为template时，可以有第二种写法 -->
        <template v-slot:footer>
          <div class="foot">
            <a href>经典</a>
            <a href>热门</a>
            <a href>推荐</a>
          </div>
          <h4>欢迎前来观影</h4>
        </template>
      </Category>
    </div>

category组件

<template>
    <div class="category">
       <h3>{{title}}分类</h3>
       <!-- 挖个坑，等着组件的使用者进行填充 -->
       <slot name="center">默认值，当使用者没有传递具体结构时，会显示1</slot>
       <slot name="footer">默认值，当使用者没有传递具体结构时，会显示2</slot>
    </div>    
</template>

<script>
    export default{
        name:'Category',
        props:['title']
    }
</script>

<style scoped>
    .category{
        background-color: skyblue;
        width:200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    img{
        width: 100%;
    }
</style>

app组件：

<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <School :getSchoolName="getSchoolName" />
    <!-- <Student v-on:atguigu="getStudentName"/> -->
    <Student ref="student" />
    <!-- vue中借助ruoter-link 标签实现路由的切换 -->
    <!-- <router-link active-class="active" to='/about'>About</router-link> -->
    <router-link active-class="active" :to="{name:'guanyu'}">About</router-link>
    <br />
    <router-link active-class="active" to="/home">Home</router-link>

    <div class="router_view">
      <router-view></router-view>
    </div>
    <button @click="getHome">获取主页信息</button>
    <div class="container">
      <Category title="美食">
        <img
          slot="center"
          src="https://img1.baidu.com/it/u=3003020177,2948003422&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
          alt
        />
        <a slot="footer" href>更多美食</a>
      </Category>
      <Category title="游戏">
        <ul slot="center">
          <li v-for="(item,index) in games" :key="index">{{item}}</li>
        </ul>
        <div class="foot" slot="footer">
          <a href>单机游戏</a>
          <a href>网络游戏游戏</a>
        </div>
      </Category>
      <Category title="电影">
        <meta name="referrer" content="no-referrer" />
        <video
          slot="center"
          controls
          src="http://vfx.mtime.cn/Video/2019/03/12/mp4/190312083533415853.mp4"
        ></video>
        <!-- <template slot="footer"> -->
          <!-- 当为template时，可以有第二种写法 -->
        <template v-slot:footer>
          <div class="foot">
            <a href>经典</a>
            <a href>热门</a>
            <a href>推荐</a>
          </div>
          <h4>欢迎前来观影</h4>
        </template>
      </Category>
    </div>
  </div>
</template>

<script>
import School from "./components/School";
import Student from "./components/Student";
import axios from "axios";
import Category from "./components/Category";

export default {
  name: "App",
  components: {
    School,
    Student,
    Category,
  },
  data() {
    return {
      msg: "你好！",
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《猪猪侠》"],
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("app收到了schoole的数据：", name);
    },
    getStudentName(name) {
      console.log("app收到了student的数据：", name);
    },
    demo() {
      console.log("demo绑定");
    },
    getHome() {
      axios.get("http://localhost:8080/proxy/home/getHome").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          "请求失败了", error.msg;
        }
      );
    },
  },
  mounted() {
    this.$refs.student.$on("atguigu", this.getStudentName);
    this.$refs.student.$on("demo", this.demo);
  },
};
</script>

<style>
.app {
  background-color: bisque;
}
.router_view {
  background-color: aliceblue;
}
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>

3、作用域插槽

当数据在子组件中，但父组件要生成不同结构，通过插槽传递给子组件，可使用作用域插槽传递数据！

<template>
    <div class="category02">
       <h3>{{title}}分类</h3>
       <!-- 挖个坑，等着组件的使用者进行填充 -->
       <slot :games02="games02">当没有数据时的默认内容</slot>
    </div>    
</template>

<div class="container">
      <Category02 title="游戏">
        <template scope="category02Games">
          <ul>
            <li v-for="(g,index) in category02Games.games02" :key="index">{{g}}</li>
          </ul>
        </template>
      </Category02>
      <Category02 title="游戏">
       <template scope="category02Games">
          <ol>
            <li v-for="(g,index) in category02Games.games02" :key="index">{{g}}</li>
          </ol>
        </template>
      </Category02>
      <Category02 title="游戏">
        <template scope="category02Games">
        <h4 v-for="(g,index) in category02Games.games02" :key="index">{{g}}</h4>
        </template>
      </Category02>
    </div>

作用域插槽一定要使用标签template，才能传递数据！！

category02组件：

<template>
    <div class="category02">
       <h3>{{title}}分类</h3>
       <!-- 挖个坑，等着组件的使用者进行填充 -->
       <slot :games02="games02">当没有数据时的默认内容</slot>
    </div>    
</template>

<script>
    export default{
        name:'Category02',
        props:['title'],
        data() {
            return {
                games02: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"]
            }
        },
    }
</script>

<style scoped>
    .category02{
        background-color: skyblue;
        width:200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    img{
        width: 100%;
    }
</style>

app组件：

<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <School :getSchoolName="getSchoolName" />
    <!-- <Student v-on:atguigu="getStudentName"/> -->
    <Student ref="student" />
    <!-- vue中借助ruoter-link 标签实现路由的切换 -->
    <!-- <router-link active-class="active" to='/about'>About</router-link> -->
    <router-link active-class="active" :to="{name:'guanyu'}">About</router-link>
    <br />
    <router-link active-class="active" to="/home">Home</router-link>

    <div class="router_view">
      <router-view></router-view>
    </div>
    <button @click="getHome">获取主页信息</button>
    <div class="container">
      <Category title="美食">
        <img
          slot="center"
          src="https://img1.baidu.com/it/u=3003020177,2948003422&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
          alt
        />
        <a slot="footer" href>更多美食</a>
      </Category>
      <Category title="游戏">
        <ul slot="center">
          <li v-for="(item,index) in games" :key="index">{{item}}</li>
        </ul>
        <div class="foot" slot="footer">
          <a href>单机游戏</a>
          <a href>网络游戏游戏</a>
        </div>
      </Category>
      <Category title="电影">
        <meta name="referrer" content="no-referrer" />
        <video
          slot="center"
          controls
          src="http://vfx.mtime.cn/Video/2019/03/12/mp4/190312083533415853.mp4"
        ></video>
        <!-- <template slot="footer"> -->
        <!-- 当为template时，可以有第二种写法 -->
        <template v-slot:footer>
          <div class="foot">
            <a href>经典</a>
            <a href>热门</a>
            <a href>推荐</a>
          </div>
          <h4>欢迎前来观影</h4>
        </template>
      </Category>
    </div>
    <h1>作用域插槽</h1>
    <div class="container">
      <Category02 title="游戏">
        <template scope="category02Games">
          <ul>
            <li v-for="(g,index) in category02Games.games02" :key="index">{{g}}</li>
          </ul>
        </template>
      </Category02>
      <Category02 title="游戏">
       <template scope="category02Games">
          <ol>
            <li v-for="(g,index) in category02Games.games02" :key="index">{{g}}</li>
          </ol>
        </template>
      </Category02>
      <Category02 title="游戏">
        <template scope="category02Games">
        <h4 v-for="(g,index) in category02Games.games02" :key="index">{{g}}</h4>
        </template>
      </Category02>
    </div>
  </div>
</template>

<script>
import School from "./components/School";
import Student from "./components/Student";
import axios from "axios";
import Category from "./components/Category";
import Category02 from "./components/Category02";

export default {
  name: "App",
  components: {
    School,
    Student,
    Category,
    Category02,
  },
  data() {
    return {
      msg: "你好！",
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《猪猪侠》"],
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("app收到了schoole的数据：", name);
    },
    getStudentName(name) {
      console.log("app收到了student的数据：", name);
    },
    demo() {
      console.log("demo绑定");
    },
    getHome() {
      axios.get("http://localhost:8080/proxy/home/getHome").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          "请求失败了", error.msg;
        }
      );
    },
  },
  mounted() {
    this.$refs.student.$on("atguigu", this.getStudentName);
    this.$refs.student.$on("demo", this.demo);
  },
};
</script>

<style>
.app {
  background-color: bisque;
}
.router_view {
  background-color: aliceblue;
}
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>

结果：

在这里插入图片描述

春风霓裳
关注
专栏目录
vue-splitter-pane-一个Vuejs组件，以可调整的拆分方式（垂直或水平）呈现两个插槽。-Vue.js开发
05-27
Vue拆分器窗格演示vue-splitter-pane是Vuejs组件，它以可调节的拆分方式（垂直或水平）呈现两个插槽。 使用Vue拆分器窗格演示vue-splitter-pane是Vuejs组件，它以可调节的拆分方式（垂直或水平）呈现两个插槽。 使用...
vue图片裁剪插件：vue-img-cutter
廊坊吴彦祖
12-28 6592
vue图片裁剪插件：vue-img-cutter vue-img-cutter 是一个简单易用的 vue 图片裁剪插件，支持旋转、缩放、平移，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求 Github：https://github.com/acccccccb/vue-img-cutter 特点： 兼容IE9+，MSEdge，Chrome，Firefox 两种展现形式，行内或弹窗 可旋转、缩放图片 任意比例、大小裁剪 固定比例、大小裁剪 支持
electron使用vue-img-cutter
暮雪的博客
09-20 141
electron使用vue-img-cutter
vue3图片剪裁:vue-img-cutter
最新发布
Gunba1的博客
01-29 851
vue-img-cutter实现当前已有的图片剪裁
【vue】组件中的插槽使用
python全栈
11-08 2259
直接写在组件中的内容，会填充到默认的插槽中（没有用name属性起名字的插槽）在组件中定义插槽的时候，给插槽中预留位置用在接收data中的传过来的数据；其他组件在使用这个组件的时候，可以获得该传递过来的数据。父组件中通过这种形式去子组件中填充内容(固定的)
Vue—ImgCutter实现图片剪裁
zhiyun_li1的博客
04-12 618
上传图片时经常会用到图片剪裁：那么接下来分享的是Vue里的ImgCutter剪裁方法。 （实现功能如下图 ） 1、首先下载 npm install vue-img-cutter --save-dev 2、页面引入 import ImgCutter from 'vue-img-cutter' export default { components:{ ImgCutter }, ... } 3、html部分 <div class="imag
vue-search-panel-用于搜索建议的Vue组件-Vue.js开发
05-27
简体中文vue-search-panel是一个带有建议的搜索组件内容功能示例安装用法API参考功能根据输入单词过滤建议，支持自定义规则自定义建议元素，按插槽自定义支持自定义UI支持配置面板位置（顶部/底部/左/右/静态）扩展...
vue-tree-chart:由D3.js支持的使用Canvas和Svg的灵活树形图
05-01
使用unique-color方式识别Canvas中的鼠标单击事件（您可以参考以查看详细信息）SVG版本使用D3计算节点和链接位置使用Vue处理dom元素进入和离开使用Vue插槽让用户轻松使用自己的数据如何使用？SVG版本1.安装npm模块...
vue-tel-input-带Vue的国际电话输入。-Vue.js开发
05-27
有用的链接v2.xx的Live Demo Changelog文档目录入门安装npm浏览器用作vue-form-generator的自定义字段使用道具事件插槽打字稿支持信用和贡献者入门安装插件：npm install vue-tel- input将插件添加到您的应用程序：...
vue-response-components-使用ResizeObserver创建响应组件。-Vue.js开发
05-27
vue-response-components使用ResizeObserver创建响应组件。 想法请查看我在ITNEXT安装上的帖子npm install vue-sensitive-c vue-response-components使用...response指令，带有作用域插槽的“使用响应”组件
VUE图片裁剪功能vue-img-cutter
想炒股的前端
03-01 1888
VUE图片裁剪功能vue-img-cutter 前言： 演示地址 兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式，行内或弹窗 可旋转、缩放图片 任意比例、大小裁剪 固定比例、大小裁剪 支持远程图片裁剪、跨域设置 一、安装 npm install vue-img-cutter --save-dev 二、使用 <template> <ImgCutter ref="imgCutterModal" :imgCropperPic="imgCropper
图片裁剪工具vue-img-cutter
qq_45184152的博客
07-08 428
https://github.com/acccccccb/vue-img-cutter 1.安装 npm install vue-img-cutter --save-dev 2. 引入注册 import ImgCutter from 'vue-img-cutter' export default { components:{ ImgCutter }, ... } 3.引用 <ImgCutter @cutDown="cutDown"
图片实现裁剪功能vue-img-cutter
weixin_44770377的博客
04-01 2980
添加链接描述
uniapp使用vue-img-cutter(下)
暮雪的博客
10-10 114
uniapp使用vue-img-cutter
Vue —— 进阶插槽（slot）（默认插槽、具名插槽和作用域插槽）
HuoZhiyan 的博客
05-18 2796
文章目录什么是插槽（slot）？1. 插槽的作用2. 插槽的分类一、默认插槽1. 语法规范2. 实例：呈现三种 html 内容二、具名插槽1、语法规范2. 实例：呈现三种 html 内容（多个插槽）三、作用域插槽1. 理解2. 语法规范2. 实例：对游戏数据的三种呈现（有序、无序和h4大小） 什么是插槽（slot）？ 1. 插槽的作用 让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式。 适用于： 父组件 => 子组件 2. 插槽的分类 默认插槽 具名插槽 作用域
文件上传(WebUploader)成功之前自定义裁剪(vue-img-cutter)，上传裁剪的图片，并兼容ie
xyqseven的博客
07-02 520
上传文件使用的是WebUploader，可 分片、并发、文件体积大时支持MD5秒传 地址：http://fex.baidu.com/webuploader/ 思路： 初始化上传组件，使用vue-img-cutter的裁剪；在裁剪成功之后；为兼容ie, 将裁剪获得的base64Url格式的图片地址转成bolo文件，追加到上传队列之中；调用上传方法继续进行上传，以确保上传的是裁剪后的图片 使用方法： 第一步：先引用webuploader.js，建议下载下来放在本地直接使用 安装依赖vue-img-cutter并
Python--快捷生成朋友圈九宫格图片
weixin_44634558的博客
10-13 2223
在命令行使用PIP安装库： pip install pillow 按下win+R，弹出界面输入cmd回车，然后输入上面命令等待安装完成即可 直接上代码： #图片处理.py from PIL import Image def yasuo(way): x, y = im.size a = eval(input("请输入想要缩小的倍数(0-1)：")) if 0 < a <= 1: b = 1/a im.thumbnail((x//b, y//
Vue上传图片裁剪预览插件vue-img-cutter的使用
祈澈菇凉
11-09 2210
在做web前端开发的时候，你一定遇到过这样的业务场景，上传用户头像的时候，需要将图片进行裁剪等操作，这个时候，我们一般会用到第三方插件。 如果自己造轮子的话，就太慢了，耽误时间不说，搞不好还要留下来加班。 这里就推荐一个简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自...
android 固定比例图片裁剪插件,vue-img-cutter: 简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪，只需要很少的代...
weixin_29045585的博客
05-25 375
vue-img-cutter简单易用的vue图片裁剪插件，支持旋转、缩放、平移，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。特色：兼容IE9+,MSEdge,Chrome,Firefox两种展现形式，行内或弹窗可旋转、缩放图片任意比例、大小裁剪固定比例、大小裁剪支持远程图片裁剪、跨域设置插件截图：演示地址：项目地址：如果此项目对你...
vue vue-resize-text
08-08
使用vue-resize-text非常简单，只需要在需要自适应调整文本大小的地方使用该组件，并将文本内容作为插槽传递给组件即可。组件会根据容器的大小自动计算并调整文本的字号，以确保文本始终适应容器。 除了自动调整...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值