vue的组件间传值

系统管理员 2021-09-02 05:12 417阅读 0赞

**父组件向子组件传值**

1.父组件中引入子组件，直接使用v-bind在子组件标签上传值

<template>
      <div>
        <homeBar :fcMsg="fcMsg"/>
        <div class="father">
            {
       {fcMsg}}
        </div>
      </div>
    </template>
    <script>
    import homeBar from './homeBar.vue'
    export default{
    components:{
            homeBar
            },
     data() {
            return {
                fcMsg: 'hello 我是爸爸',//要传递给子组件的值
            }
        },
    }
    </script>

2.在子组件中使用props接收:可以使用数组直接接收，如果要定义接收类型使用对象接收

<template>
      <div id="homeBar">
          <h1>navBar组件</h1>
          这是父组件传过来的值:{
       {fcMsg}}
      </div>
    </template>
    
    <script>
    export default {
        name:'homeBar',
        // props:['fcMsg'],
        props:{
          fcMsg:{
            type:String,
            default:'哈哈哈'
          }
        }
    }
    </script>

![20201110175715841.png][]

如果是有好几层父子关系

可以使用**依赖注入**:**`provide` 和 `inject  父组件中使用provide 接收的子组件中使用inject`**

新建一个barSon文件，并且在homeBar文件中引入

<template>
      <div class="barSon">
          我是homeBar的孩子
        <p>爷爷传给我的 {
       {isShowA}}</p>
      </div>
    </template>
    
    <script>
    export default {
        name:'barSon',
        inject: ['isShowA'],
    }
    
    </script>
    <style scoped>
    </style>

homeBar文件引入

<template>
      <div id="homeBar">
        我是homeBar
        <barSon></barSon>
      </div>
    </template>
    
    import barSon from './barSon'
    
    export default{
        components:{barSon},
    }

homePage文件中

export default{
        name: 'homePage',
        provide(){
           return{
               isShowA:'我是依赖注入的东西'  
              }
           },
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

--------------------

**子组件向父组件传值**

1.子组件中使用$emit触发事件

<template>
      <div id="homeBar">
          {
       {count}} <button @click="addCount">+</button>
      </div>
    </template>
    
    <script>
    export default {
        name:'homeBar',
        data(){
          return{
            count:0
          }
        },
        methods:{
          addCount(){
            this.count++;
            this.$emit('childE',this.count)
          },
        }
    }
    </script>

2.父组件中响应childE事件,事件响应返回参数为所传的值

<template>
      <div>
        <homeBar @childE="childE"/>
          <p>这是homePage组件</p>
          <p>子组件父组件的传值{
       {Totalcount}}</p>
      </div>
    </template>
    
    <script>
    import homeBar from './homeBar.vue'
    
    export default {
        name: 'homePage',
        components:{
            homeBar,
            },
        data() {
            return {
                Totalcount:0
            }
        },
        methods:{
            childE(data){
                this.Totalcount = data
            }
        }
    }
    </script>

![20201110174906393.png][]

--------------------

**任何组件之间传值(父子，子父，兄弟)**

$emit 触发当前实例上的事件。附加参数都会传给监听器回调。

$on 监听当前实例上的自定义事件。事件可以由 `vm.$emit` 触发。回调函数会接收所有传入事件触发函数的额外参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1][]

1.新建一个js文件eventBus.js

import Vue from 'vue'
    var EventBus = new Vue();
    export default EventBus
    
    或者直接绑定为Vue的原型上
    Vue.prototype.$EventBus = new Vue()

2.在homeBar文件中引入，并使用$emit传递事件

<template>
      <div id="homeBar">
           <p @click="emitList">给我的兄弟组件homeList传值</p> 
      </div>
    </template>
    
    <script>
    import EventBus from './eventBus'
    
    export default {
        name:'homeBar',
        },
        data(){
          return{
            count:0
          }
        },
        methods:{
          emitList(){
            EventBus.$emit('to-List','嗨，我是homeBar')
          }
        }
    }
    </script>

2.在barList组件中使用$on响应事件

<template>
      <div id="homeList">
          我是homeList组件
          {
       {toList}}
      </div>
    </template>
    
    <script>
    import EventBus from './eventBus'
    
    export default {
        name:'homeList',
        data(){
            return{
                toList:''
            }
        },
        mounted(){
            EventBus.$on('to-List',(data)=>{
                this.toList = data
            })
        }
    }
    </script>

点击homeBar中的实践触发标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 2][]

EventBus.$off('事件名', 回调函数)

*  `EventBus.$off('事件名', callback)`，只移除这个回调的监听器。
 *  `EventBus.$off('事件名')`，移除该事件所有的监听器。
 *  `EventBus.$off()`， 移除所有的事件监听器，注意不需要添加任何参数。

缺点

*  大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。
 *  如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。
 *  由于是都使用一个Vue实例，所以容易出现重复触发的情景，两个页面都定义了同一个事件名，并且没有用$off销毁（常出现在路由切换时）。

优点

*  解决了多层组件之间繁琐的事件传播。
 *  使用原理十分简单，代码量少。

--------------------

**祖孙级别的传递$attrs/$listeners**

创建A,B,C三个组件，组件为嵌套关系

A.vue

<template>
      <div id="app">
          我是A组件
        <B :ChildB="ChildB" :ChildC="ChildC" v-on:ChildCFun="ChildCFun" v-on:ChildBFun="ChildBFun"></B>
      </div>
    </template>
    <script>
    import B from "./B.vue";
    export default {
      data() {
        return {
            ChildB:'A传给B的数据',
            ChildC:'A传给C的数据'
        };
      },
      components: { B },
      methods: {
        ChildBFun() {
          console.log("B传给A的方法");
        },
        ChildCFun() {
          console.log("C传给A的方法");
        }
      }
    };
    </script>

B.vue

<template>
      <div class="child-1">
        <p>我是B组件</p>
        <p>props: {
       {ChildB}}</p>
        <p>$attrs: {
       {$attrs}}</p>
        <hr />
        
        
        <C v-bind="$attrs" v-on="$listeners"></C>
      </div>
    </template>
    <script>
    import C from "./C.vue";
    export default {
      props: ["ChildB"],
      data() {
        return {};
      },
      inheritAttrs: false,
      components: { C },
      mounted() {
        this.$emit("ChildBFun");
      }
    };
    </script>

C.vue

<template>
      <div class="child-2">
        <p>我是C组件</p>
        <p>props: {
       {ChildC}}</p>
        <p>$attrs: {
       {$attrs}}</p>
        <hr />
      </div>
    </template>
    <script>
    export default {
      props: ["ChildC"],
      data() {
        return {};
      },
      inheritAttrs: false,
      mounted() {
        this.$emit("ChildCFun");
      }
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 3][]

**数据的传输**

1.  我们将在A组件中向B组件传数据ChildB，ChildC
2.  B组件使用props正常接受ChildB，我们可以拿到值
3.  这时C组件要想读到A传来的值 需要给C设置 v-bind="$attrs"

注意attrs是除props接受的值以外的值

当我们在B组件中不接收时，值会继续穿透

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 5][]

这个ChildB不用props接受的时，值可以一直保留穿透下去

**数据流反向传递 C---B---A**

1.  C组件中$emit触发事件
2.  想将事件传递给A组件，需要给C设置v-on="$listeners"

在A组件中使用$on就可以拿到C组件传递过来的值

[20201110175715841.png]: /images/20210813/f74291d2a38c402fb68c193f86f51dc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/5b658e22781045888709767a25cf72c9.png
[20201110174906393.png]: /images/20210813/9db366b670ad45c7b72a75b50e211349.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1]: /images/20210813/e0d1f7d64eb14943853b3850b31d6221.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 2]: /images/20210813/48874565463d4f87bcd37d3cac165d21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 3]: /images/20210813/444126e2b75147598449ef592942e558.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 4]: /images/20210813/29b60d4199f94489b6f040b1daa9a4d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 5]: /images/20210813/5a28f59d3bc14b8d9bf00bbebbbee670.png