Vue初学14-组件的基本使用

组件化开发可以实现模块化,提高代码复用率,而且界面会更加整洁。

组件使用的步骤:

  1. 创建组件
  2. 注册组件
  3. 使用组件

全局组件

注意一种es6新语法``,位于tab键上方,可以在``中间写html或文本,支持换行不用加+

    
     

效果如下: 

Vue初学14-组件的基本使用_第1张图片

局部组件

上述组件是在全局范围内注册的,可以在全局范围内使用。

如果有多个vue分别绑定了多个div,也都可以使用mycpn组件,不过一般只有一个vue。

如果想让组件在局部使用,例如在id=app的div内部使用,可以注册成局部组件。


     

效果如下:

Vue初学14-组件的基本使用_第2张图片

 父组件和子组件

此时,子组件的注册是在在父组件的内部,因此子组件不能单独使用,只能在父组件的内部使用。

    
     

效果如下:

Vue初学14-组件的基本使用_第3张图片

 

你可能感兴趣的:(vue)