局部组件的使用 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">


    </div>
<script src="../vue.js"></script>
    <script>
        // <!--1  声子  Vue中 组件的名字 首字母要大写 跟标签区分 组件中的data必须是个函数 一定要有返回值
-->
        let App = {     <!--局部组件-->
            data(){
            return{
                text:'我是小影'
            }

            },
            template:`
            <div id="a"><h2>{{text}}</h2></div>
             `
        };

        new Vue({
            el:'#app',
            data(){
                return{
                    msg:'lv',
                }
            },
            template:
                //用子   外面一定要有一个根元素包着
                `
                <div class="app222">
                <App></App>
                </div>
                `,


            //挂子
            components:{
                //2.挂子
            //如果key和value一样 可以只写一个
            //App:App
                App
            }
        })

    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>

<script src="../vue.js"></script>
<script>
   //第一个参数是组件的名字，第二个参数 options参数 它是全局组件,复用性高
   //<slot></slot>  是vue中提供的内容组件,他会去分发内容
    Vue.component('VBtn',{
        data(){
            return{

            }
        },
        template:`
        <button>
            <slot></slot>

</button>


        `
    })

//    App   header Vaside  Vcontent
//    1.声子  Vue中 组件的名字 首字母要大写 跟标签区分 组件中的data必须是个函数 一定要有返回值


    let Vheader={
        data(){
            return{

            }

        },
        template:`
            <div>
                <h2>日天</h2>
                <h2>日天</h2>
                <VBtn>登录</VBtn>
                <VBtn>注册</VBtn>
                <VBtn>按钮</VBtn>
                <VBtn>提交</VBtn>

            </div>


        `,
    }
    let App={   //局部组件
        data(){
            return{
                text:'我是小宁'
            }
        },
        template:`

        <div id="a">
        <h2>{{text}}</h2>
         <Vheader></Vheader>
         <VBtn>删除</VBtn>  <!--<全局组件直接用既可以了,不用挂子 //-->


</div>
        `,

        //挂子
        components:{
            Vheader
        }
    };
    new Vue({
        el:'#app',
        data(){
            return{
                msg:"alex"

            }
        },
        template:'<App />',
        components:{
            App
        }

    })

</script>
</body>
</html>

 

posted @ 2018-12-01 18:23  团子emma  阅读(82)  评论(0)    收藏  举报