【Vue3】3-2 : 组件的概念及组件的基本使用方式

本书目录：点击进入

一、组件的概念

1.1、为什么要做成组件

1.2、【案例】评分组件与按钮组件的抽离过程 

二、组件的使用 - 抽离结构

2.1、【案例】简易首页

＞  效果

＞  代码 - 原始

＞  代码 - 组件抽离结构

＞  ​​​​​​​代码 - 测试响应式数据

三、组件的命名方式与规范

四、根组件

4.1、【测试】根组件中 template的结构 优先级高于 app容器中的结构

＞  ​​​​​​​【效果】当template和app容器中同时出现结构时，效果

＞  ​​​​​​​【效果】当只有template

＞  ​​​​​​​【效果】当只有app容器

 五、局部组件 与 全局组件

总结：组件使用步骤

Stage 1：申明

Stage 2：注册

Stage 3：使用

根组件：注册后直接在app容器中使用（见上图Myhead）

子组件：注册后在父组件 template中使用（见上图MyLogo）

5.1、全局组件

＞  ​​​​​​​代码 

＞  效果

5.2、局部组件

＞  ​​​​​​​代码 

＞  效果

---

一、组件的概念

        组件是带有名称的可复用实例，通常一个应用会以一棵嵌套的组件树的形式来组织，比如：页头、侧边栏、内容区等组件。

1.1、为什么要做成组件

         将 结构，样式，逻辑 抽离出来做成组件。方便复用和后期维护。

1.2、【案例】评分组件与按钮组件的抽离过程 

二、组件的使用 - 抽离结构

2.1、【案例】简易首页

＞  效果

＞  ​​​​​​​代码 - 原始

  

    

      
hello world
      
logo
      

        
首页
        
视频
        
音乐
      
    
  

＞  ​​​​​​​代码 - 组件抽离结构

＞  ​​​​​​​代码 - 测试响应式数据

三、组件的命名方式与规范

• 定义组件：驼峰、短线 两种风格定义

• 调用组件：短线方式

四、根组件

        app容器可以看成根组件，所以根组件跟普通组件都具备相同的配置信息，例如：data、computed、methods 等等选项。

4.1、【测试】根组件中 template的结构 优先级高于 app容器中的结构

• app容器中的结构

•  根组件中 template的结构

＞  ​​​​​​​【效果】当template和app容器中同时出现结构时，效果

＞  ​​​​​​​【效果】当只有template

＞  ​​​​​​​【效果】当只有app容器

 五、局部组件 与 全局组件

总结：组件使用步骤

Stage 1：申明

    let MyLogo = {
      template: `
        
logo
      `
    };

Stage 2：注册

分两种

• 全局注册

    //全局组件
    app.component('MyHead', MyHead);
    app.component('MyLogo', MyLogo);

• 局部注册（谁使用，谁注册）

Stage 3：使用

• 根组件：注册后直接在app容器中使用（见上图Myhead）

• 子组件：注册后在父组件 template中使用（见上图MyLogo）

5.1、全局组件

＞  ​​​​​​​代码 

＞  效果

5.2、局部组件

＞  ​​​​​​​代码 

＞  效果