JS经典实例网站首页 JS经典实例

全局组件与插槽(slot)

发布时间：2020-02-09 17:44:37编辑：雪饮阅读（）

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
</style>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    //定义一个全局组件
    Vue.component("Vbtn",{
        template:'<button><slot></slot></button>'
    });
    var Vcontent = {
        template:`
            <div class='content'>
            
            <Vbtn>add</Vbtn>
            </div>
            `,
    }

    var Vaside = {
        template:`<div class='aside'>
            
            <Vbtn>del</Vbtn>
        </div>`
        };

        var Vheader = {
        template:`<div class='head'>
        
        <Vbtn>update</Vbtn>
    </div>`
        };
        var App={
        template:`<div class='main' :style='{fontSize:postFontSize+"em"}'>
               <Vheader />
               <div class = 'main2'>
                  <Vaside />
                  
                    <Vbtn>select</Vbtn>
                    <Vcontent @change="changeFontSizeTop"/>
        </div>
        </div>`,
    data(){
        return {
            postFontSize:1
        }
    },
    components:{Vheader,Vaside,Vcontent}
    }
    new Vue({
        el:'#app',
        template:'<App></App>',
        data(){
            return {}
        },
        components:{App}
    });
</script>
</body>
</html>

关键字词：vue,slot,组件

上一篇：子组件向父组件通信

下一篇：父子组件间的属性传递(自定义标签)(属性prop)

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

全局组件与插槽(slot)

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例