zoukankan      html  css  js  c++  java
  • Vue_(组件通讯)使用solt分发内容

      Vue特殊特性slot  传送门

      有时候我们需要在自定义组件内书写一些内容,例如:

         <com-a>

          <h1>title</h1>

         </com-a>

       如果想获取上面代码片段中h1标签的内容该怎么办呢?Vue提供了一个极为方便的内置组件<slot>

      Learn

        一、使用solt分发内容

      目录结构

      

      【每个demo下方都存有html源码】

    一、使用solt分发内容

      在<my-component-a>组件中添加<h1>、<ul>、<a>标签,并在<h1>标签中添加组件<slot="title">、在<ul>标签中添加组件<slot="ul">,在<a>标签中添加组件<solt="a">

        <body>
            <div id="GaryId">
                <my-component-a>
                    <h1 slot="title">Gary大标题</h1>
                    
                    <ul slot="ulli">
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                    </ul>
                    
                    <a href="#" slot="a">传送门</a>
                </my-component-a>
            </div>
        </body>

      可以直接在<template>中设计标签布局顺序

        <template id="template-a">
            <div>
                
                <slot name="title">数据为空</slot>
                <h1>my-component-a</h1>
                
                <slot name="a">数据为空</slot>
                <slot name="ulli">数据为空</slot>
            </div>
        </template>

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Gary</title>
        </head>
        <body>
            <div id="GaryId">
                <my-component-a>
                    <h1 slot="title">Gary大标题</h1>
                    
                    <ul slot="ulli">
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                    </ul>
                    
                    <a href="#" slot="a">传送门</a>
                </my-component-a>
            </div>
        </body>
    
        <template id="template-a">
            <div>
                
                
                
                
                <slot name="a">数据为空</slot>
                
                <h1>my-component-a</h1>
                <slot name="ulli">数据为空</slot>
                <slot name="title">数据为空</slot>
            </div>
        </template>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script type="text/javascript">
        
            let comA = {
                template :  "#template-a"
            }
            
            new Vue({
                data : {
                    
                },
                components : {
                    "my-component-a" : comA
                }
            }).$mount("#GaryId");
        
        </script>
    </html>
    Gary_slot.html
    (如需转载学习,请标明出处)
  • 相关阅读:
    java处理高并发高负载类网站的优化方法
    谈谈Memcached与Redis
    php中const与define的使用区别 详解
    ecshop添加模板与库文件
    ECShop 2.5.1 的结构图及各文件相应功能介绍
    Uva10972(RevolC FaeLoN)
    交叉染色法判断二分图
    边双联通问题求解(构造边双连通图)POJ3352(Road Construction)
    POI1999(仓库管理员)
    ZOJ1311(Network)
  • 原文地址:https://www.cnblogs.com/1138720556Gary/p/10549875.html
Copyright © 2011-2022 走看看