组件：组合slot

淩亂°似流年 2021-11-14 14:10 255阅读 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 条评论，255人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关组件：slot插槽

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

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

相关组件：组合slot

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

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

相关 vue 作用域插槽、slot 、v-slot 、slot-scope

vue 插槽slot 和具名插槽作用都是在调用组件的时候传递一些DOM结构进去，不同点是：具名插槽在传递DOM时需要声明，传递给哪个slot的名字 name

╰半夏微凉°/ 2021年09月19日 00:28/ 0 赞/ 431 阅读