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

前端传值的方式：

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 scoped>
  .home{
    box-sizing: border-box;
    padding: 30px;
    border: 3px solid yellow;
  }
</style>

二、子向父

子组件的代码

<template>
  <div class="son">
    <h2>这是son组件</h2>
    <h3>向父组件传值</h3>
    <button @click="up">向上传</button>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        count: 100   
      }
    },
    methods:{
      up(){
        // 点击的时候就向上传值
        // 给当前组件定义一个事件叫fromson
        this.$emit('fromson',this.count)
      }
    }
  }
</script>

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

父组件的代码

<template>
  <div class="home">
  // 在父组件中接收子组件的方法
    <son @fromson="getsonval" ></son>
  </div>
</template>

<script>

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

// 父组件:  home
// 子组件:  son
  
export default {
  name: 'HomeView',
  components: {
    Son
  },
  methods:{
  // 获取到子组件传上来的方法
    getsonval(val){
      console.log(val)
    }
  }
}
</script>


<style scoped>
  .home{
    box-sizing: border-box;
    padding: 30px;
    border: 3px solid yellow;
  }
</style>

三、中间人通信

中间人通信的本质就是，子1传给父，父再传给子2

四、依赖注入（provide(提供)，inject(注入)）

使用场景：网站风格设计：暗夜模式和白天模式

// 要从父组件传个值 给孙子组件  
// home                age
    // son              |
        // grandson    age

// 可以通过props 层层向下传 
  // 如果是这样穿层级多了,就会比较麻烦,中间少了一层就会导致传值不成功

// 这种方式也叫祖先组件 向 后代组件传值   依赖注入
// provide  定义要向后代组件 传的值
// inject   要接收到 祖先组件 传下来的值

爷爷组件的代码

<template>
  <div class="home">
  
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  provide:{
    value: 999     // 使用provide定义的数据,就可以直接在后代组件中取到
  },
}
</script>


<style scoped>
  .home{
    box-sizing: border-box;
    padding: 30px;
    border: 3px solid yellow;
  }
</style>

孙子组件的代码

<template>
  <div class="grandson">
    <h2>这是grandson组件</h2>
    <h3>通过inject取到祖先组件传下来的值: {{value}}</h3>
  </div>
</template>

<script>
  // props data  有修改都会? 引起组件的更新
  export default {
    inject: ['value']   // 从祖先组件中取到定义的值
  }
</script>

<style scoped>

  .grandson{
    border: 1px solid red;
  }
</style>

五、事件中心eventBus

在vue2中,如果是兄弟组件之间传值,可以事件中心(event bus)去传，但是在vue3就不能使用了 (去除了$on方法)；其本质就是订阅发布者模式。（感兴趣的可以去去看我的订阅发布者模式篇。链接：订阅发布者模式）

六、使用ref绑定实例

  // $root  获取根实例
  // $parent  获取父实例
  // $refs   获取指定的实例
  // this.$refs 可以拿到组件绑定了ref属性的实例
  // ref如果绑定的是组件,拿到的是组件实例
  // res如果绑定是普通元素,那么拿到是dom对象

子组件的代码

子组件（borther1，borther2）,父组件（AboutView）

<template>

  <div class="box">
    <div>brother1-{{num}}</div>

    <button @click="getparent">$parent</button>
    <button @click="getroot">$root</button>

  </div>  
</template>

<script>
  export default {
    data(){
      return {
        num:88
      }
    },  
    methods:{
      getparent(){
        // this.$parent  是拿到的是父组件的实例
        // 拿到的这个实例也可以修改里面的值, 但是不建议这么做!! (数据就不好追踪了)
        console.log(this.$parent.count)
        // this.$parent.count = 999
      },
      getroot(){
        // this.$root获取到根实例  App.vue
        console.log(this.$root)
      }
    }
  }
</script>

<style scoped>
  .box{
    border: 1px solid red;
  }
</style>

<template>
  <div>brother2</div>
</template>

父组件的代码

<template>
  <div class="about">
    <h3>count: {{ count }}</h3>
    <!-- ref绑定是的组件 -->
    // 其中ref绑定的ref="bro1"，bro1的名字随自己定义，在方法里面调用的时候保持同名就可以
    <brother1 ref="bro1"></brother1>
    <button @click="getbro1">想获取brother1组件的实例</button>

    <!-- ref绑定的是普通元素 -->
    <div class="box2" ref="box2">box</div>
    <button @click="getdom">想获取某元素</button>
  </div>
</template>

<script>
  import Brother1 from '@/components/Brother1.vue';
  import Brother2 from '@/components/Brother2.vue';
  // 在vue2中,如果是兄弟组件之间传值,可以事件中心(event bus)去传
  // 但是在vue3就不能使用了 (去除了$on方法)

  // $root  获取根实例
  // $parent  获取父实例
  // $refs   获取指定的实例
  export default {
    data(){
      return {
        count: 888
      }
    },
    methods:{
      getbro1(){
        // console.log(Brother1)
        // console.log(this.$root)

        // this.$refs 可以拿到组件绑定了ref属性的实例
        // ref如果绑定的是组件,拿到的是组件实例
        // res如果绑定是普通元素,那么拿到是dom对象
        // 其中ref绑定的ref="bro1"，bro1的名字随自己定义，在方法里面调用的时候保持同名就可以
        // 在这里保持同名即可
        console.log(this.$refs.bro1)
        this.$refs.bro1.num +=1
        ![控制台打印](https://img-blog.csdnimg.cn/320b874c6b624a25916da70f792b0cec.png#pic_center)

      },
      getdom(){
        // console.log(this.$refs.box2)
        ![控制台打印](https://img-blog.csdnimg.cn/a92e6f32dc4b4597b42a6cf7c8be746c.png#pic_center)

        this.$refs.box2.style.color = 'blue'
        this.$refs.box2.style.fontSize = '30px'
      }
    },
    components: {
      Brother1,
      Brother2
    }
  }
</script>

<style scoped>
  .box2{
    width: 100px;
    height: 100px;
    border: 5px solid red;
  }
</style>

七、Vuex（Vuex请移步到Vuex篇）

总结

提示：前端传值的方式： props，this.$emit，依赖注入(provide,inject)，Vue2的事件中心evnetBus，Vuex

例如：以上就是今天要讲的内容。