组件嵌套以及VueComponent的讲解(代码实现)

时间:2022-12-12 18:14:21

1、效果图分析

组件嵌套以及VueComponent的讲解(代码实现)

2、先创建一个组件

    //第一步、创建city组件
        const city = Vue.extend({
            template: `
                <div class="cityDemo">
                     城市名称:{{cityName}}
                     城市美食:{{cityFood}}
                     <button @click="show">点击我弹窗</button>
                 </div>
            
            `,
            data() {
                return {
                    cityName: "周口",
                    cityFood: "胡辣汤"
                }

            },
            methods: {
                show() {
                    alert("你好啊、Vue")
                }
            },
        })

3、新创建一个组件、嵌套已经存在的组件

==注意:注册组件的过程写在新组建中。并且在template中要使用组件才可以生效==

        //第一步创建 学校组件
        const school = Vue.extend({
            name: "myschoolOne",
            template: `
                <div class="cityDemo">
                     学校名称:{{schoolName}}
                     学校位置:{{schoolAddress}} 
                     <city></city>    
                 </div>
            
            `,
            data() {
                return {
                    schoolName: "长沙大学",
                    schoolAddress: "湖南长沙"

                }
            },
            //2、注册组件
            components: {
                city
            }


        })

4、第四步 注册组件

     //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                value: "Vue"
            },
            //第二步、注册组件(局部注册)
            components: {
                school
            }
        })

5、实现的效果

组件嵌套以及VueComponent的讲解(代码实现)组件嵌套以及VueComponent的讲解(代码实现)

6、套娃式嵌套 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <div >
        <app></app>

    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //第一步、创建city组件
        const city = Vue.extend({
            template: `
                <div class="cityDemo">
                     城市名称:{{cityName}}
                     城市美食:{{cityFood}}
                     <button @click="show">点击我弹窗</button>
                 </div>
            
            `,
            data() {
                return {
                    cityName: "周口",
                    cityFood: "胡辣汤"
                }

            },
            methods: {
                show() {
                    alert("你好啊、Vue")
                }
            },
        })

        //第一步创建 学校组件
        const school = Vue.extend({
            name: "myschoolOne",
            template: `
                <div class="cityDemo">
                     学校名称:{{schoolName}}
                     学校位置:{{schoolAddress}} 
                     <city></city>    
                 </div>
            
            `,
            data() {
                return {
                    schoolName: "长沙大学",
                    schoolAddress: "湖南长沙"

                }
            },
            //2、注册组件
            components: {
                city
            }


        })


        //第一步创建学生组件
        const student = Vue.extend({
            name: "student",
            template: `
                <div class="studentDemo">
                     学生姓名:{{studentName}}
                     学生年龄:{{studentAge}}  
                 </div>
            `,
            data() {
                return {
                    studentName: 'zyz',
                    studentAge: 18
                }
            }

        })

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

        // 第二步、全局注册组件
        // Vue.component('city', city)

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                value: "Vue"
            },
            //第二步、注册组件(局部注册)
            components: {
                app
            }
        })


    </script>

</body>

</html>

7、测试效果

组件嵌套以及VueComponent的讲解(代码实现)

8、关于VueComponent

关于VueComponent:

  • 1、==school组件==本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。

  • 2、我们只需要写<school/><school></school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)

  • 3.特别注意:每次调用Vue.extend,返回的都是一个全新的:VueComponent

  • 4.关于this指向: (1)、组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是==VueComponent实例对象==。 (2)、new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是==Vue实例对象==。

  • 5、VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。 Vue的实例对象,以后简称vm。

9、代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <div >
        展示的信息:{{name}}
        <button @click="fun()">请点击我Vue</button>
        <hr>
        <!-- 第三步、编写组件标签 -->
        <school></school>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示


        //第一步创建 学校组件
        const school = Vue.extend({
            name: "myschoolOne",
            template: `
                <div class="cityDemo">
                     学校名称:{{schoolName}}
                     学校位置:{{schoolAddress}}
                     <button @click="show">点击我弹窗</button>     
                 </div>
            
            `,
            data() {
                return {
                    schoolName: "长沙大学",
                    schoolAddress: "湖南长沙"

                }
            },
            methods: {
                show() {
                    console.log("我是VueComponent", this)
                }
            },


        })



        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                name: "你好,VUE"
            },
            methods: {
                fun() {
                    console.log("我是Vue", this)
                }
            },
            //第二步、注册组件(局部注册)
            components: {
                school
            }
        })


    </script>

</body>

</html>

10、实现的效果

组件嵌套以及VueComponent的讲解(代码实现)组件嵌套以及VueComponent的讲解(代码实现)组件嵌套以及VueComponent的讲解(代码实现)组件嵌套以及VueComponent的讲解(代码实现)

组件嵌套以及VueComponent的讲解(代码实现)