Vue进阶之组件化开发_vue把组件写在一个对象里-CSDN博客

本文链接：https://blog.csdn.net/qq_42707967/article/details/115827558

本文深入探讨Vue的组件化开发，从组件化思想、组件创建到父子组件的交互，详细解析了Vue实例创建组件、全局与局部组件、组件间的通信方式等关键点，旨在帮助开发者更好地理解和应用Vue组件。

摘要由CSDN通过智能技术生成

一.组件化思想介绍

组件化开发，本质就是将相同功能的模块开发成一个个可以复用的小组件，然后通过引入各个组件实现一个完整页面的开发，组件化开发就像树结构一样，每一个组件都是树形结构上的一个分支节点

1.1 Vue实例创建组件

在Vue中创建组件构造器有几种实现方式，但是大体思想包含3步，如下：
1.创建组件构造器
2.注册组件
3.在Vue实例对象中使用组件

组件第一种创建使用方法，基于extend方式：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewpot" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vuezujianhua</title>
        <script src='./vue.js'></script>
        <style>

        </style>
    </head>
    <body>
        <div id="shop" v-cloak>
            <!-- vue实例对象中使用全局组件 -->
            <my_content></my_content>
        </div>

        <template id="content">
            <div>
                {
  {childMovies}}
            </div>
        </template>
        <script>
            // 1. 创建组件构造器
            const content = Vue.extend({
    
                template:`
                    <div>
                        <h2>这是一个标题</h2>
                        <p>这是一段内容</p>    
                    </div>
                `,
            })
            // 2. 注册组件
            Vue.component('my_content', content)
            var vm = new Vue({
    
                el:'#shop',
                data:{
    
                    movies: ['海王', '海贼王'],
                },
                methods:{
    

                },

            })
        </script>
    </body>
</html>

注意点：通过调用Vue中extend方法首先创建组件构造器，这种实现方法比较底层

实现方式二，直接通过Vue.component()语法糖方式实现

Vue.component('my_content', {
                template:`
                    <div>
                        <h2>这是一个标题1</h2>
                        <p>这是一段内容</p>    
                    </div>
                `,
            })

语法糖实现直接将extend中实现模板的内容放到了component中，其实语法糖底层实现也是调用了extend，但是这样实现更简洁

1.2 全局组件和局部组件

全局组件：全局组件的创建和注册都在与vue实例同一层级的结构中实现
例如：
全局组件

<script>
            // 创建组件构造器， 注册组件，这样是一个全局组件，因为组件创建和注册和new Vue实例化同级
            Vue.component('my_content', {
    
                template:`
                    <div>
                        <h2>这是一个标题1</h2>
                        <p>这是一段内容</p>    
                    </div>
                `,
            })
            var vm = new Vue({
    
                el:'#shop',
                data:{
    
                    movies: ['海王', '海贼王'],
                },
                methods:{
    

                },

            })
        </script>

上面Vue.component（）创建组件和注册组件都是通过Vue对象实现，而且和Vue对象实例化同级

局部组件

<script>
            // 创建组件构造器， 注册组件，这样是一个局部组件，因为组件创建和注册放到了vue实例对象中
            var cpm = {
    
                template:`
                    <div>
                        <h2>这是一个标题111</h2>
                        <p>这是一段内容</p>    
                    </div>
                `,
            }
            var vm = new Vue({
    
                el:'#shop',
                data:{
    
                    movies: ['海王', '海贼王'],
                },
                methods:{
    

                },
                components:{
    
                    'my_content': cpm
                }
            })
        </script>