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

本文详细介绍了Vue.js中组件的概念、抽离结构的方法、命名规范,以及根组件和局部/全局组件的区别。通过实例展示了如何声明、注册和使用组件,帮助开发者理解和实践组件化开发。
摘要由CSDN通过智能技术生成

本书目录:点击进入

一、组件的概念

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、【案例】简易首页

>  效果

>  ​​​​​​​代码 - 原始

<body>
  <div id="app">
    <header>
      <div>hello world</div>
      <h2>logo</h2>
      <ul>
        <li>首页</li>
        <li>视频</li>
        <li>音乐</li>
      </ul>
    </header>
  </div>
</body>

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

<body>
  <div id="app">
    <my-head></my-head>
  </div>
  <script>
    let app = Vue.createApp({
      data(){
        return {
        }
      }
    })
    app.component('my-head', {
      template: `
        <header>
          <div>{{ message }}</div>
          <h2>logo</h2>
          <ul>
            <li>首页</li>
            <li>视频</li>
            <li>音乐</li>
          </ul>
        </header>
      `
    });
    
    let vm = app.mount('#app');
  </script>
</body>

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

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

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

  • 调用组件:短线方式

四、根组件

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

<div id="app">
	<my-head></my-head>
</div>
<script>
    // 根组件
    let RootApp = {
      data(){
        return {
        }
      }
    };
    // MyHead组件
    let MyHead = {
      template: `
        <header>
          <div>{{ message }}</div>
          <h2>logo</h2>
          <ul>
            <li>首页</li>
            <li>视频</li>
            <li>音乐</li>
          </ul>
        </header>
      `
    };
    let app = Vue.createApp(RootApp)
    app.component('MyHead', MyHead);
    let vm = app.mount('#app');
  </script>

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

  • app容器中的结构

  •  根组件中 template的结构

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

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

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

 五、局部组件 与 全局组件

总结:组件使用步骤

Stage 1:申明

    let MyLogo = {
      template: `
        <h2>logo</h2>
      `
    };

Stage 2:注册

分两种

  • 全局注册
    //全局组件
    app.component('MyHead', MyHead);
    app.component('MyLogo', MyLogo);
  • 局部注册(谁使用,谁注册)

Stage 3:使用

  • 根组件:注册后直接在app容器中使用(见上图Myhead)
  • 子组件:注册后在父组件 template中使用(见上图MyLogo)

5.1、全局组件

>  ​​​​​​​代码 

<body>
  <div id="app">
    <my-head></my-head>
  </div>
  <script>
    let MyLogo = {
      template: `
        <h2>logo</h2>
      `
    };
    let MyHead = {
      template: `
        <header>
          <div>{{ message }}</div>
          <my-logo></my-logo>
          <ul>
            <li>首页</li>
            <li>视频</li>
            <li>音乐</li>
          </ul>
        </header>
      `
    };
    let RootApp = {
      data(){
        return {
        }
      }
    };
    let app = Vue.createApp(RootApp)

    //全局组件
    app.component('MyHead', MyHead);
    app.component('MyLogo', MyLogo);
    
    let vm = app.mount('#app');
  </script>
</body>

>  效果

5.2、局部组件

>  ​​​​​​​代码 

>  效果

  • 40
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ladymorgana

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值