Vue技术18.3组件的嵌套

最新推荐文章于 2023-05-30 19:31:29 发布

yitahutu79

最新推荐文章于 2023-05-30 19:31:29 发布

阅读量97

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40713201/article/details/126392884

版权

Vue.js 组件嵌套数据绑定前端开发

关键词由CSDN通过智能技术生成

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8" />
        <title>组件的嵌套</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
        
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //定义student组件
        const student = Vue.extend({
            template:`
            <div>
                <h2>学生姓名：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
            `,
            data(){
                return {
                    name:'张三',
                    age:18
                }
            }
        })

        //定义school组件
        const school = Vue.extend({
            template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>
            </div>
            `,
            data(){
                return {
                    name:'尚硅谷',
                    address:'北京'
                }
            },
            //注册组件（局部）
            components:{
                student
            }
        })
        
        //定义hello组件
       const hello = Vue.extend({
        template:`
        <div>
            <h1>{{msg}}</h1>
        </div>
        `,
        data(){
            return {
            msg:'欢迎来到尚硅谷学习'
                } 
            }
       })

       //定义app组件
       const app = Vue.extend({
        template:`
        <div>
            <hello></hello>
            <school></school>
           
        </div>
        `,
        components:{
            hello,
            school
            
        }
       })

        new Vue({
            template:'<app></app>',
            el:'#root',
            //注册组件(局部注册)
            components:{
               app
            }
        })

        
    </script>
</html>