vue组件学习整理

最新推荐文章于 2024-08-01 03:56:52 发布

原创最新推荐文章于 2024-08-01 03:56:52 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨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>