vue组件学习整理

本文深入探讨Vue.js中组件的使用与通信机制,包括局部注册组件的限制、props属性的类型检查与默认值设置、事件监听的命名规范以及插槽的使用技巧,帮助开发者更好地理解和应用Vue.js组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.局部注册的组件在其子组件中不可用。

2.对于props值,在 JavaScript 中是 camelCase 的;在html中是 kebab-case 的;在字符串模板中不受限制。

 props: {
    propA: Number, // 基础的类型检查 (`null` 匹配任何类型)
   
    propB: [String, Number],  // 多个可能的类型
   
    propC: {
      type: String,
      required: true  // 必填的字符串
    },
    
    propD: {
      type: Number,
      default: 100  // 带有默认值的数字
    },
   
    propE: {        // 带有默认值的对象
      type: Object,
      default: function () {   // 对象或数组且一定会从一个工厂函数返回默认值
        return { message: 'hello' }
      }
    },
    
    propF: {    // 自定义验证函数
      validator: function (value) {
        return ['success', 'warning', 'danger'].indexOf(value) !== -1  // 必须匹配下列一个
      }
    }
 
 }
3.事件名:
this.$emit('myEvent'),  因为 HTML 是大小写不敏感的),所以v-on:myEvent将会变成v-on:myevent——导致myEvent不可能被监听到。

 所以,事件名推荐使用:kebab-case或者全小写

4.插槽:

示例:

普通插槽:

子组件:
<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

父组件:
<navigation-link url="/profile">
  <font-awesome-icon name="user"></font-awesome-icon>    //可以插入一个组件
  Your Profile                                           //可以插入文本
  <span class="fa fa-user"></span>                       //可以插入html
</navigation-link>


子组件:
<a v-bind:href="url" class="nav-link">
  <slot>Submit</slot>                //插槽的默认内容为'Submit',当有对应内容时'Submit'即被覆盖
</a>

具名插槽(一个子组件需要多个插槽):

子组件:
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>                                     //未命名插槽叫做默认插槽
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>


父组件中(template用法):
<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>  
  </template>

  <p>A paragraph for the main content.</p>             //未命名的内容会匹配到未命名的插槽上
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>


父组件中(普通元素用法):
<base-layout>
  <h1 slot="header">Here might be a page title</h1>

  <p>A paragraph for the main content.</p>              //未命名的内容会匹配到未命名的插槽上
  <p>And another one.</p>

  <p slot="footer">Here's some contact info</p>
</base-layout>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

JasonSon__

大家的支持,才是我最大的鼓励~

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

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

打赏作者

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

抵扣说明:

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

余额充值