持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

1.组件的概念

组件是可复用的 Vue 实例, 封装标签, 样式和JS代码

一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)

2.组件通信-EventBus

我大概列举一下常用的组件通信方式

父子组件:使用props和$emit进行通信 v-model数据双向绑定

兄弟关系:eventBus:$on+$emit

爷孙关系:使用provide+inject来通信

没有关系:用Vuex和Pinia等等

注意咯:接下来介绍两种组件通信的方式

3.$ref(父向子)

$refs能够获取原生 DOM 对象和获取组件对象

1. 给组件或标签添加 ref 属性+属性名

2. this.$refs.属性名

<template>
  <div>
    <!--1. 给组件或标签添加 ref 属性  取个属性名 -->
    <p id="id" ref="pp">一个p标签</p>
  </div>
</template>
<script>
export default {
  mounted() {
    //第二步:this.$refs.ref属性名
    console.log(this.$refs.pp);
  },
};
</script>

3.2.通过$ref+refs可以获取组件对象,可以调用组件对象里的方法等

4.sync(子向父)

.sync修饰符和v-model一样都是语法糖

他们最大的区别是:一个组件上只能有一个v-model,而.sync修饰符可以有多个。