zoukankan      html  css  js  c++  java
  • VUE.js快速入门(vue本地应用⑥)

    vue组件的内容分发

    为了让组件可以组合,需要一种方式来混合父组件内容和子组件内容模板,这个过程叫做内容分发

    插槽:

    单<slot>标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <my-head>
                <my-title></my-title>
            </my-head>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm=new Vue({
                el:"#app",
                components:{
                    "my-head":{
                        template:`<div>head<slot></slot></div>`
                    },
                    "my-title":{
                        template:`<h2>title</h2>`
                    }
                }
            })
        </script>
    </body>
    </html>

    多<slot>标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <my-head>
                    <button slot="left"><-</button>
                    <button slot="right">-></button>
            </my-head>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm=new Vue({
                el:"#app",
                components:{
                    "my-head":{
                        template:`<div><slot name="left"></slot>head<slot name="right"></slot></div>`
                    },
                    "my-title":{
                        template:`<h2>title</h2>`
                    }
                }
            })
        </script>
    </body>
    </html>

    <slot>默认值

    可以在slot里面直接写,但是如果写了,就是写的。

  • 相关阅读:
    jps命令
    Collection
    java.lang包中异常
    final关键字
    JVM运行时数据区域
    String详解
    哈希码
    Java虚拟机
    垃圾收集器与内存分配策略
    solr简介
  • 原文地址:https://www.cnblogs.com/liuyang95/p/13021435.html
Copyright © 2011-2022 走看看