VUE.js快速入门（vue本地应用⑥）

2021-02-13 08:21

阅读：530

标签：src net meta initial cdn template 快速默认值 scale

vue组件的内容分发

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

插槽：

单标签

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
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>headslot>/slot>/div>`
                },
                "my-title":{
                    template:`h2>title/h2>`
                }
            }
        })
    script>
body>
html>

多标签

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
head>
body>
    div id="app">
        my-head>
                button slot="left">->
                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>/div>`
                },
                "my-title":{
                    template:`h2>title/h2>`
                }
            }
        })
    script>
body>
html>

默认值

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

VUE.js快速入门（vue本地应用⑥）

标签：src net meta initial cdn template 快速默认值 scale

原文地址：https://www.cnblogs.com/liuyang95/p/13021435.html

上一篇：Servlet中写了注解@WebServlet但访问servlet报404错误

下一篇：OWIN 自托管静态网站

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：VUE.js快速入门（vue本地应用⑥）
文章链接：http://soscw.com/index.php/essay/54807.html

亲，登录后才可以留言！

VUE.js快速入门（vue本地应用⑥）

评论

热门文章

推荐文章

最新文章

置顶文章