Vue组件进阶干货

目录

 

编写组件细节

定义组件名称的两种方式:

1.使用Kebab-case

2.使用PascalCase

组件嵌套子组件

1.父组件直接嵌套子组件

2.父组件通过插槽(slot)嵌套

3. 单个插槽

4.具名插槽

5.作用域插槽

---

编写组件细节

在注册一个组件的时候，我们始终需要给它一个名字。比如全局注册的时候我们在已经会使用:

该组件名就是 Vue.component 的第一个参数。

你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

定义组件名称的方式有两种:

1.使用Kebab-case

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

2.使用PascalCase

当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

---

组件嵌套子组件

在某些情况我们是需要使用到嵌套组件，也就是说组件还可以继续嵌套组件。形成嵌套组件有两种的实现方式。

1.父组件直接嵌套子组件

2.父组件通过插槽(slot)嵌套

插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。那么插槽(slot)分成3种分别是:单个插槽，具名插槽，作用域插槽。

3. 单个插槽

首先是单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。

4.具名插槽

匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置。

5.作用域插槽

作用域插槽是一种特殊类型的插槽，用作一个（能被传递数据的）可重用模板，来代替已经渲染好的元素。

在子组件中，只需将数据传递到插槽，就像你将prop传递给组件一样: