props

父组件有些数据：数组或字符串；

可以通过props传递给子组件；

props

如果父组件给子组件，传递的是一个方法或函数；

这是什么意思？

这个意思是：子组件要调用父组件的方法，给父亲传递参数。

props

props可以实现兄弟组件通信，无非就是把数据挂载到父组件身上；

props

props是只读的，readonly；

自定义事件

实现子组件，向，父组件，传递数据。

全局事件总线$bus

在vue2当中，存在一个构造函数。

这个构造函数，可以让你去创建实例的。

var app = new Vue({
   el: '#app',
   data: {
       message: 'Hello Vue!'
   }
});

这个构造函数，就创建了vue实例。

vue实例，就是vm，就是所谓的vue model；

当你使用 new Vue(options) 创建一个 Vue 应用时，

你实际上是在创建一个 Vue 实例。

这个实例拥有 Vue 提供的所有功能，

包括响应式数据绑定、指令、事件系统、计算属性、观察者等。

Vue 实例是整个 Vue 应用的核心，

它是你与 Vue 框架交互的主要方式。

---

在日常开发中说的VC是什么呢？

就是vue component。

Vue 组件 (VC - Vue Component):

Vue 组件是 Vue 应用的基本构建块。

组件可以被视为可重用的 Vue 实例，

它们有自己的模板、数据、方法和生命周期钩子。

组件可以嵌套，使得复杂的应用程序能够以模块化的方式构建。

在 Vue 中，你可以定义单文件组件（SFCs），

将组件的模板、样式和逻辑放在同一个文件中。

黑话

vm就是vue实例

vc就是vue组件

$bus可以实现任意组件的通信；

pubsub插件

发布订阅模式；

也可以实现任意组件通信。

因为vue的组件通信方式是很多的。

所以pubsub在vue的项目当中使用的比较少。

在react项目或者是微信小程序项目当中使用的，还是比较多的。

vuex

集中式状态管理器；

也是可以实现任意组件通信；

vuex面试的时候会问核心的概念：

• state(store对象)
• mutations(改变state，同步)
• actions(改变state，异步，通过commit调用mutations)
• getter(计算state)
• modules(组织管理)
  • namespacing
• plugins(利用插件持久化)
• HMR(热替换)

vuex的缺点：存储数据并非持久化；

ref

ref可以获取到真实的dom节点；

在父组件内部可以获取到子组件的实例VC，能拿到儿子所有的数据和方法，也是一种组件通信方式了。

slot插槽

• 默认插槽
• 具名插槽
• 作用域插槽

vue2其他的组件通信方式

• $attrs
• $parent
• $children

仓库地址

https://gitee.com/jch1011/vue3_communication.git

把代码克隆下来：

然后通过npm run dev运行一下；

vscode打开小项目

element-plus

element-plus就是element-ui的升级版本；

九个路由组件

九个路由组件的路由，都已经配好了：

/*
所有路由配置的数组
*/

export default [
  

  /* --------------------------------------- */
  {
    path: '/props_pre',
    component: () => import('@/views/01_props/PropsTest.vue'),
  },
  {
    path: '/event_pre',
    component: () => import('@/views/02_custom-event/EventTest.vue'),
  },
  {
    path: '/bus_pre',
    component: () => import('@/views/03_event-bus/EventBusTest.vue'),
  },
  {
    path: '/model_pre',
    component: () => import('@/views/04_v-model/ModelTest.vue'),
  },
  {
    path: '/attrs-listeners_pre',
    component: () => import('@/views/05_attrs-listeners/AttrsListenersTest.vue'),
  },
  {
    path: '/ref-parent_pre',
    component: () => import('@/views/06_ref-children-parent/RefChildrenParentTest.vue'),
  },
  {
    path: '/provide-inject_pre',
    component: () => import('@/views/07_provide-inject/ProvideInjectTest.vue'),
  },
  {
    path: '/vuex_pre',
    component: () => import('@/views/08_pinia/index.vue'),
  },
   {
    path: '/slot_pre',
    component: () => import('@/views/09_slot/SlotTest.vue'),
  },
]

先讲解props

props的数据，你可以用，但是不可以修改，这就是只读的；

vue3 - props

上面的代码，你看一眼。

所谓的props，就是在父组件的子组件标签里头，写属性嘛。

我们写了一个info，这就是一个静态的数据；

我们写了一个money，这就是一个动态的数据；

vue3 - props

我们在父组件当中通过props传递给儿子数据了。

儿子怎么接收呢？

在vue3当中通过defineProps接收；

defineProps会返回一个代理对象，代理对象身上有两个属性，存储父亲给的数据。

vue3 - props - 模板当中写法

• 父亲给了两个props：info和money
• 儿子通过defineProps接收；
• 儿子可以通过props.info和props.money显示，也可以直接写info和money。

注意

props用的时候，template标签内可以省略props.，script标签内必须用props.