组件：组合slot

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

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

相关阅读

相关组件化开发中的常用的插槽(slot)元素

> 详细请阅读官方文档——[插槽官方文档][Link 1] 1. 什么是插槽？插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，

本是古典何须时尚/ 2022年12月11日 04:21/ 0 赞/ 71 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关组件：slot插槽

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

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

相关组件：组合slot

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

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

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

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

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

相关前端框架vue.js系列（6）：组合组件和动态组件

组合组件组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。

电玩女神/ 2021年09月14日 06:24/ 0 赞/ 333 阅读