Vue中父子组件传值问题

父组件传值给子组件

• 使用子组件的props属性
• Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。子组件能够在实例中访问prop的值，就像访问 data 中的值一样。使用v-bind来动态传值

子组件传值给父组件

• 使用事件监听
• 在子组件内绑定一个自定义事件, 并触发一个函数或是一个表达式
• 在子组件的模板代码中, 把自定义事件通过 $emit(“事件名称”), 绑定给某个事件,这样就可以通过子组件的事件触发, 实现外部父组件改变和监听到子组件的值的变化
• $emit( eventName, 传给事件函数的参数)
• 外部父组件使用@"事件名称"处理监听子组件事件
• 自定义事件也可以用于创建支持 v-model 的自定义输入组件

兄弟组件传值

• ① 子传父，父再传子
• ② 事件总线eventBus传值
  • npm install vue-bus --save
  • import VueBus from 'vue-bus';Vue.use(VueBus)
  • eventBus 适合小项目、数据被更少组件使用的项目，对于中大型项目数据在很多组件之间使用的情况 eventBus 就不太适用了
  • eventBus 其实就是一个发布订阅模式，利用 Vue 的自定义事件机制，在触发的地方通过 $emit 向外发布一个事件，在需要监听的页面，通过$on 监听事件

其他通信方式

• Vuex
• provide/inject
• $attrs/$listeners

-------------------------------------------------------------------------------2024.5.29每日一题