zoukankan      html  css  js  c++  java
  • vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件

    关于vue入门案例请参阅
    https://www.cnblogs.com/singledogpro/p/11938222.html 下载vuejs,Hello Vue(vscode)

    先看看目录结构,这里的vue.js脚本存放在src文件夹下,所以如果你参照上面的vue入门,记得把vue.js引用的地方也要修改下

    目录结构
    目录结构

    vue.js引用的地方
    vue.js引用的地方

    vue组件化流程

    1.创建组件构造器

    在script标签内创建组件构造器,需要注意的是template属性后面的点点不是字符串的单引号,而是ES6的新语法(字符串可以换行),键盘esc键下方的 ` `

    创建组件构造器
    创建组件构造器

    点点不是字符串的单引号,键盘esc键下方的 ··
    点点不是字符串的单引号,键盘esc键下方的 ··

    调用Vue.extend0创建的是一个组件构造器
    构造器内的template参数,就是我们自定义组件的模板。这样的书写方法非常麻烦,后面还有template标签进行简化
    该模板就是在使用到组件的地方,将模板内的HTML代码进行显示。
    Vue2.x的文档对这种语法进行封装,直接语法糖,但是在教科书上还是会提到这种方式,了解这种底层会让我们更深入vue的组件化思想

    2.注册组件

    第一个参数是指你使用这个组件(第一步我们注册的组件构造器)时,它的标签名是什么?如定义该标签为mycpn,在vue管理的实例里该标签就是<mycpn></mycpn> ,第二个参数就是第一步我们注册的组件构造器。

    注册组件
    注册组件

    3.使用组件

    在vue实例管理的容器内使用刚定义好的mycpn标签(该标签可以自定义)。

    使用组件
    使用组件

    全局组件和局部组件

    vue实例对象是顶级对象,也可看做一个顶级组件,所以定义在vue实例对象外的组件是全局组件。上述创建的组件就是全局组件,因为它定义在vue实例对象之外

    mycpn定义在vue实例对象之外,所以是全局对象
    mycpn定义在vue实例对象之外,所以是全局对象

    一旦组件定义在vue实例对象内部,它就变成了局部组件。

    全局组件与局部组件的区别在于,全局组件可以在任何地方显示(出现),而局部组件只能在其vue实例对象管理的地方进行显示(出现)。可以简单了解全局组件是董事长,vue实例是总经理,局部是经理。董事长可以在公司在任何部门出现,而经理由于受到总经理的约束,只能在总经理给与他的职权范围内出现。 虽然全局组件哪里都可以显示,但是为了规范化管理,一般都是局部组件。

    在vue实例内部定义的就是局部组件
    在vue实例内部定义的就是局部组件

    在vue实例内部定义,并在vue容器使用的局部组件
    在vue实例内部定义,并在vue容器使用的局部组件

    在vue实例内部定义的局部组件,如果不在vue容器内使用,它不会在浏览器中显示。

    不会在浏览器中显示
    不会在浏览器中显示

    在vue实例内部定义但不在容器内使用
    在vue实例内部定义但不在容器内使用

  • 相关阅读:
    C#2.0泛型学习--入门篇
    [转自MSDN]如何映射 HRESULT 和异常
    js创建hashtable
    滑雪在日本 之 新泻篇 3
    就算神游 之四:富士山和富士游乐园 2
    就算神游 之四:富士山和富士游乐园 9
    滑雪在日本 之 新泻篇 9
    滑雪在日本 之 新泻篇 14
    就算神游 之四:富士山和富士游乐园 4
    挤地铁的感悟
  • 原文地址:https://www.cnblogs.com/singledogpro/p/12054895.html
Copyright © 2011-2022 走看看