Vue学习日记（13）组件

组件的定义

非单文件组件

	<div id="root">
        <!-- 第三步：使用组件标签 -->
        <xuexiao></xuexiao>
        <hr>
        <xuesheng></xuesheng>
        <hr>
        <hello></hello>
        <hr>
    </div>

    <div id="root2">
        <hello></hello>
    </div>
   
    
</body>

<script>
    Vue.config.productionTip = false

    // 第一步：创建school组件
    const school = Vue.extend({
        template:`
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>
                </div>
                `,
        data(){
            return{
                schoolName:'GZN',
                address:'大连'
            }
        }
    })
    // 第一步：创建student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
                <button @click="msg">点我提示姓名</button>
            </div>
        `,
        data(){
            return{
                studentName:'徐凤年',
                age:18
            }
        },
        methods: {
            msg(){
                alert(this.studentName)      
            }
        },
    })

    const hello = Vue.extend({
        template:`
                <h1>Hello {{name}}</h1>
        `,
        data(){
            return{
                name:'GZN'
            }
        }
    })

    // 注册组件（全局）
    Vue.component('hello',hello)

    new Vue({
        el:'#root',
        // 第二步：注册组件(局部)注：经常使用
        components:{
            xuexiao:school,
            xuesheng:student
        }  
    })

    new Vue({
        el:'#root2'
    })

</script>

组件的嵌套

<div id="root">
        
    </div>

</body>
    <script>
        Vue.config.productionTip = false

        const xs = Vue.extend({
            template:`
                    <h2>学生姓名：{{name}}</h2>
            `,
            data(){
                return{
                    name:'徐凤年'
                }
            }
        })
        const xx = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <xs></xs>
                </div>
            `,
            data(){
                return{
                    name:'清华'
                }
            },
            components:{
                xs
            }
            
        })
        const hello = Vue.extend({
            template:`
                    <h1>{{msg}}</h1>
            `,
            data(){
                return{
                    msg:'欢迎 GZN'
                }
            }
        })
        const app = Vue.extend({
            template:`
                <div>
                    <hello></hello>
                    <xx></xx>
                </div>
            `,
            components:{
                xx,
                hello
            }
        })

        new Vue({
            template:`<app></app>`,
            el:'#root',
            components:{
                app
            }            
        })

    </script>