Vue组件需要理解，掌握的内容

Posted 2021-09-03 mcgee0731

Vue组件

组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装为整体。

提高功能的复用性与可维护性，更好的专注于业务逻辑。

组件使用时为自定义html标签形式，通过组件名作为自定义标签名

<div id="app">
  // 普通 html 标签
  <p></p>
  // Vue.js组件
  <my-com></my-com>
</div>

组件概况

• 组件注册
• 组件通信
• 组件插槽
• 内置组件

组件注册

• 组件注册文章入口

组件通信

• 组件间传递数据的操作，称为组件通信

问题
子组件如何获取父组件中的数据？
父组件如何得知子组件得数据变更？
更加复杂的组件关系？

• 组件通信文章入口

组件插槽

• 组件插槽可以便捷的设置组件内容。

例如父组件给子组件进行内容设置，可能需要父组件调用很多次子组件内容，当然通过props传入设置不是不可以，但是我们希望直接在标签内设置，更加简洁

<div id="app">
  <com-a>
    示例内容
    <span>组件的主题内容</span>
  </com-a>
</div>

• 组件插槽文章入口

---

内置组件

• 内置组件文章入口