前端组件之间传值的多种方式

抬头第一眼，是天

已于 2022-09-26 15:37:58 修改

阅读量376

点赞数

分类专栏： Vue2 文章标签：前端 javascript vue.js

于 2022-09-20 21:19:22 首次发布

本文链接：https://blog.csdn.net/Mr_Ypp/article/details/126960525

版权

本文详细介绍了前端组件间的传值方式，包括props、this.$emit、依赖注入(provide, inject)、事件中心eventBus、使用ref绑定实例以及Vuex。通过实例代码展示了各种方法的使用场景和操作步骤，帮助开发者深入理解并掌握组件通信技巧。" 132386997,19687622,Android操作.xlsx文件：打开与读取,"['Android开发', '文件处理', 'Excel', 'Apache POI']

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

前端传值的方式：

props，this.$emit，依赖注入(provide,inject)，Vue2的事件中心evnetBus，Vuex

提示： props data 有修改都会引起组件的更新！

前言

提示：这里可以添加本文要记录的大概内容：

1.为什么要通过子组件向父组件传值或者父组件向子组件传值？

    官方的说法：早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

    我的理解：状态管理，类似于vuex,子组件通过自定义事件向父组件传值，触发父组件dom元素进行更新，父向子传值也是一样

2.怎么使用，props该放在那个位置

porps:父组件通过props属性向子组件传递数据，定义组件的时候可以定义一个props属性，值可以是一个字符串数组或一个对象。

父组件向子组件传值

提示：以下是本篇文章正文内容，下面案例可供参考

一、porps父向子传值？

子组件的代码

<template>
  <div class="son">
    <h2>这是son组件</h2>
    <h3>传下来的值为: {
  {num}} -- {
  { age }}</h3>

  </div>
</template>

<script>
  export default {
     
    // 通过定义一个属性,来去接收到父组件传下来的值
    // 数组 对象 
    // props: ['num']
    props: {
     
      num: Number,
      info: Object,
      age: Number
    },
    data(){
     
      return {
     
        count: 100   
      }
    },
  }
</script>

<style scoped>
  .son{
     
    box-sizing: border-box;
    padding: 20px;
    border: 2px solid blue;
  }
</style>

父组件的代码

<template>
  <div class="home">
    <son :num="20" :info="{name:'young',age:18}" :age="age"></son>

  
  </div>
</template>

<script>

import Son from '@/components/Son.vue'

// 父组件:  home
// 子组件:  son
  
export default {
     
  name: 'HomeView',
  data(){
     
    return {
     
      age: 18
    }
  },
  components: {
     
    Son
  },
}
</script>


<style