vue3_硅谷甄选_002_vue3中props通信使用defineProps

codelyq

已于 2024-08-27 21:57:44 修改

阅读量1k

点赞数 7

分类专栏： # 硅谷甄选文章标签： html5

于 2024-08-03 23:58:49 首次发布

本文链接：https://blog.csdn.net/weixin_41748874/article/details/140899212

版权

硅谷甄选专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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'),
  },
]