Vue组件 全局 局部 语法糖 区别 分离写法

Posted 2021-09-07 HUMILITY

Vue组件

如果将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂， 而且不利于后续管理以及扩展
但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得容易

Vue组件化思想

• 组件化是Vue.js中的重要思想

  • 提供里一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用
  • 任何的应用都会被抽象成一棵组件树

• 组件化思想的应用

  • 有了组件化的思想，在之后开发尽可能将页面拆分成一个个小的，可复用的组件
  • 这也让我们的代码更加方便组织和管理，并且扩展性也更强

• 组建的使用分成三个步骤

  • 创建组件构造器
  • 注册组件
  • 使用组件

• Vue.component():

  • 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组建的标签名称
  • Vue.component(tagName, options)

  • tagName为组件名，options为配置选项
    例子基于在Vue开发环境下

         <div id="app">
        <my-cpn></my-cpn>        //注册的组件
    </div>
    <script>
        //1.创建组件构造器对象
        const cpnC = Vue.extend({
                template: `
           <div>
                <h2>我是标题</h2>
                <p>我是内容，哈哈哈哈</p>
                <p>我是内容，呵呵呵呵呵</p>
           </div>`
    
            })
            //2.注册组件
        Vue.component(\'my-cpn\', cpnC)
    
        const app = new Vue({
            el: \'#app\',
            data: {
    
            }
        })
    </script>
    //此时组件内容就显示在页面

    另一种写法

           <div id="app">
            <my-cpn></my-cpn>
        </div>
        <script>
            //注册组件
            Vue.component(\'my-cpn\', {
                template: `            //template的DOM结构必须被一个元素包含，如果直接写，不带<div></div>是无法渲染的
               <div>
                    <h2>我是标题</h2>
                    <p>我是内容，哈哈哈哈</p>
                    <p>我是内容，呵呵呵呵呵</p>
               </div>`
    
            })
    
            var app = new Vue({
                el: \'#app\',
                data: {
    
                }
            })
        </script>
    //此时组件内容就显示在页面
    

全局组件和局部组件

全局组件：意味着可以在多个Vue实例下使用
局部组件：在实例中，使用components选项可以局部注册组件，注册后的组件只有在该实例作用于下有效

        //全局组件
       <div id="app">
            <my-cpn></my-cpn>
        </div>
        <script>
            //注册组件
            Vue.component(\'my-cpn\', {
                template: `    
               <div>
                    <h2>我是标题</h2>
                    <p>我是内容，哈哈哈哈</p>
                    <p>我是内容，呵呵呵呵呵</p>
               </div>`

            })

            var app = new Vue({
                el: \'#app\',
                data: {
                
                }
            })
        </script>
        
        //局部组件
        <div id="app">
            <my-cpn></my-cpn>
        </div>
        <script>
            var child = {
                template:\'<div>局部注册组件的内容</div>\'
            }
            var app = new Vue({
                el:\'#app\',
                components:{
                    \'my-cpn\':child
                }
            })
            </script>
            

####父组件和子组件的区别
如果子组件未注册而使用，则会报错，如需使用，需在Vue实例对象内再注册

    <div id="app">

        <cpn2></cpn2>
    </div>
    <script>
        //1.创建第一个组件
        const cpn1 = Vue.extend({ //子组件
            template: `
            <div>
                <h2>我是标题</h2>
                <p>我是内容</p>
            </div>`
        })
        const cpn2 = Vue.extend({ //父组件
            template: `
            <div>
                <h2>我是标题2</h2>
                <p>我是内容2</p>
                <cpn1></cpn1>
            </div>`,
            components: {
                cpn1: cpn1
            }
        })
        var app = new Vue({ //root组件
            el: \'#app\',
            components: {

                cpn2: cpn2
            }
        })
    </script>
    ####父子组件错误用法：以子标签的形式在Vue实例中使用

• 因为当子组件注册到父组件components时，Vue会编译好父组件的模块
• 该模板的内容已经决定了父组件将要渲染的html（相当于父组件中已经有了子组件中的内容）
• <child-cpn></child-cpn>是只能在父组件中被识别的
• 类似这种用法，<child-cpn></child-cpn>是会被浏览器忽略的

注册组件语法糖

• 在之前注册组建的方式，可能有些繁琐

  • Vue为了简化这个过程，提供了注册的语法糖

  • 主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替

    全局组件

    原写法：调用extend

            const cpnC = Vue.extend({
                template: `
           <div>
                <h2>我是源</h2>
           </div>`
    
            })
        Vue.component(\'my-cpn\', cpnC)
    
        const app = new Vue({
            el: \'#app\',
            data: {
    
            }
        })

    语法糖：内部调用虽仍是extend，但简单

            <div id="app">
            <my-cpn></my-cpn>
        </div>
        <script>
            Vue.component(\'my-cpn\', {
                template: `    
              <div>
                    <h2>我是语法糖</h2>
               </div>`
    
            })
    
            var app = new Vue({
                el: \'#app\',
                data: {
    
                }
            })
    

局部组件

            var app = new Vue({
                el:\'#app\',
                data:{},
                components:{
                    \'cpnx\':{
                        template:`
                        <div>
                            <h2>我是局部组件</div>
                        </div>`
                    }
                }
            })
            

组件模板的分离写法

• Vue提供了两种方案来定义HTML模块内容

  • 使用<script>标签
  • 使用<template>标签

• 通过script标签：注意类型必须是text/template

    <div id="app">
        <my-cpn></my-cpn>
    </div>
    <script typeof="text/x-template" id="my-cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈哈哈</p>
        <p>我是内容，呵呵呵呵呵</p>
    </div>
    </script>
    <script>
        Vue.component(\'my-cpn\', {
            template: `#my-cpn`
  
        })
  
        const app = new Vue({
            el: \'#app\',
            data: {}
        })
    </script>

• template标签

    <div id="app">
        <my-cpn></my-cpn>
    </div>
         <template id="cpn">
            <div>
                <h2>语法糖</h2>
                <p>孙悟空，哈哈哈哈</p>
                <p>我是语法糖呵呵呵呵呵</p>
            </div>
        </template>
    <script>
        Vue.component(\'my-cpn\', {
            template: `#cpn`
  
        })
        const app = new Vue({
            el: \'#app\',
            data: {}
        });
    </script>