Vue的组件通信

你想要那颗糖

已于 2023-06-09 13:19:03 修改

阅读量97

点赞数 4

分类专栏： Vue 文章标签：前端 javascript html

于 2023-06-07 13:44:36 首次发布

本文链接：https://blog.csdn.net/qq_50260510/article/details/131085930

版权

Vue 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

组件通信主要涉及父子组件间的数据传递，包括父向子通过props传递数据和子向父通过$emit触发事件进行通信。父组件可以修改子组件的状态，而子组件通过事件通知父组件更新数据。文章提供了代码示例来说明这两种通信方式。

摘要由CSDN通过智能技术生成

一、组件通信

1.什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

组件的数据是独立的，无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信

2.组件之间如何通信

3.组件关系分类

父子关系
非父子关系

4.通信解决方案

5.父子通信流程

父组件通过 props 将数据传递给子组件
子组件利用 $emit 通知父组件修改更新

6.父向子通信代码示例

父组件通过props将数据传递给子组件

父组件App.vue

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件 
    <Son></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端，就来黑马程序员',
    }
  },
  components: {
    Son,
  },
}
</script>

<style>
</style>

子组件Son.vue

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    我是Son组件
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
}
</script>

<style>

</style>