Vue组件嵌套使用

最新推荐文章于 2024-03-20 11:44:00 发布

SUMMERENT

最新推荐文章于 2024-03-20 11:44:00 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/SUMMERENT/article/details/125870002

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、 Vue多组件嵌套使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套demo</title>
    <script type="text/javascript" src="../js/vue.js"></script>

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

        <!--第三步：编写组件标签-->
        <!--    <app></app>-->

    </div>
</body>
    <script type="text/javascript">
        Vue.config.productionTip = false
        //定义student组件
        const student = Vue.extend({
            template:`
                <div>
                  <h2>学生名称：{{studentName}}</h2>
                  <h2>学生年龄：{{age}}</h2>
                </div>
            `,
            data(){
                return {
                    studentName:'老王',
                    age:'12'
                }
            }
        })
        //第一步：创建school组件
        const school = Vue.extend({
            template:`
                <div>
                  <h2>学校名称：{{schoolName}}</h2>
                  <h2>学校地址：{{address}}</h2>
                  <student></student>
                </div>
            `,
            data(){
                return {
                    schoolName:'xixi',
                    address:'上海'
                }
            },
            //第二步：注册组件 (局部注册）
            components:{
                student
            }
        })
        //定义hello组件
        const hello = Vue.extend({
            template:`
                <div>
                   <h1>{{msg}}</h1>
                </div>`,
            data(){
                return {
                    msg: "欢迎学习Vue！！"
                }
            }
        })
        //定义app组件
        const app = Vue.extend({
            template:`
              <div>
                  <hello></hello>
                  <school></school>
              </div>`,
            components:{
                school,
                hello
            }
        })
        //创建vm
        new Vue({
            template:`
              <div>
                <app></app>
              </div>`,
            el: '#root',
            data: {
                msg:'你好呀！'
            },
            //第二步：注册组件  (局部注册）
            components:{
                app
            }
        })
    </script>
</html>