组件：组合slot

淩亂°似流年 2021-11-14 14:10 276阅读 0赞

<!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <link href="../css/style.css" rel="stylesheet"> </head>
    <body>
    <div id="myApp">
        <nba-all-stars c="奥尼尔" pf="加内特">
            <span slot="sf">皮尔斯</span>
            <span slot="sg">雷阿伦</span>
            <span slot="pg">隆多</span>
        </nba-all-stars>
    </div>
    <script>
        Vue.component('nba-all-stars', {
            props: ['c', 'pf'],
            template: '<div>'
                + '<div>中锋：{
         {c}}</div>'
                + '<div>大前：{
         {pf}}</div>'
                + '<div>小前：<slot name="sf"></slot></div>'
                + '<div>分卫：<slot name="sg"></slot></div>'
                + '<div>控卫：<slot name="pg"></slot></div>'
                + '</div>',
        });
        var myApp = new Vue({
            el: '#myApp',
        });
    </script>
    </body>
    
    </html>

转载于:https://www.cnblogs.com/Jeely/p/11057503.html

发表评论取消回复

表情：

评论列表（有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中slot（插槽）详解，slot、slot-scope和v-slot

slot是什么 slot，也称插槽，可以类比为插卡式的FC游戏机，游戏机（子组件）暴露卡槽（插槽）让用户插入不同的游戏磁条（自定义内容），游戏机会读取并加载磁条里的游...

缺乏、安全感/ 2024年04月17日 18:49/ 0 赞/ 69 阅读

相关 Vue3中的组件：组件的定义、组件的属性和事件、组件的Slots和动态组件

1. 引言 Vue是目前最流行的JavaScript框架之一，它提供了一种简洁、高效的方式来构建用户界面。在Vue中，组件是构建应用程序的核心概念之一。组件可以封装可重用

电玩女神/ 2024年03月17日 21:35/ 0 赞/ 125 阅读

相关 Vue之组件（插槽slot与可复用组件）

课程大纲（1）插槽基础案例（2）插槽分类 1、单个默认插槽 2、具名插槽 3、作用域插槽 4、解构插槽（3）v-slot新

我就是我/ 2023年06月11日 13:23/ 0 赞/ 29 阅读

相关 react--学习笔记5（组件组合）

组件组合：功能界面的组件化编码流程: 1. 拆分组件: 拆分界面,抽取组件 2. 实现静态组件: 使用组件实现静态页面效果 3. 实现动态组件

落日映苍穹つ/ 2022年11月25日 04:29/ 0 赞/ 239 阅读

相关 Vuejs——（11）组件——slot内容分发

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html\u4F7F\_u7528\_Slot\_\_u5206\_u53D

ゞ浴缸里的玫瑰/ 2022年09月25日 12:15/ 0 赞/ 274 阅读

相关 Vue中<slot></slot>slot也就是组件的插槽

1.比如你自己做了个一个button组件，在根组件里注册为vButton，从而复用。那么各个button上的文字肯定是不同的，但是这些文字大部分情况下也是不需要动态更新的

野性酷女/ 2022年05月27日 12:36/ 0 赞/ 207 阅读

相关 Vuejs——组件——slot内容分发

> 本篇资料来于官方文档： > > [http://cn.vuejs.org/guide/components.html\u4F7F\_u7528\_Slot\_\_u520

梦里梦外;/ 2022年05月20日 02:49/ 0 赞/ 308 阅读

相关 vue---slot插槽实现子组件向父组件传值

1.slot插槽作用域：带参数的插槽(可进行子组件向父组件传值) 父组件中：在组件标签内部加一个template标签在template标签上加一个

今天药忘吃喽~/ 2021年12月23日 10:15/ 0 赞/ 907 阅读

相关组件：slot插槽

<!DOCTYPE html> <html lang="zh"> <head> <title></title>

小灰灰/ 2021年11月14日 14:10/ 0 赞/ 349 阅读

相关组件：组合slot

<!DOCTYPE html> <html lang="zh"> <head> <title></title>

淩亂°似流年/ 2021年11月14日 14:10/ 0 赞/ 277 阅读