vue-----组件通信/传值

快来打我* 2024-04-06 13:15 40阅读 0赞

## 一 父子组件通信分为父给子传和子给父传 ##

父给子传：

1.在子组件标签中写传入的值

2.在子组件内使用props接收父组件传递的值。

子给父传：

1.在子组件内部使用$emit发射自定义事件和传递给父组件的值  
2.在父组件内声明自定义事件接受参数

## 二 兄弟组件通信 ##

1.声明一个事件总线Bus.js  
export default new Vue();  
2.引入事件总线  
import Bus from 'xx.js'  
//vue.prototype.$emit()  
使用总线$emit发射数据出去  
Bus.$emit(自定义事件名称,发射的数据)  
3.引入事件总线  
Bus.$on(自定义事件名称,(形参--->发射得数据)=>\{

\})

##  ##

## 三 祖孙组件传值 ##

1.由祖先组件使用provide方法传递数据  
provide()\{  
return \{"msg":this.msg\}  
\}  
2.由子孙组件使用inject注入数据  
inject:\["msg"\]

##  ##

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

## 一 父子组件通信 ##

### 1.1父给子传： ###

#### 1.在子组件标签中写传入的值 ####

#### 2.在子组件内使用props接收父组件传递的值。 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    
    </head>
    <body>
    	<div id="app">
           
                  
            <my-child :age="18"  obj="{name:莉莉}" num="888"></my-child>
            
    </div>
    	<script>
        let child={
                  props:{
                    // 子组件可以对父组件的传值进行类型校验
                    age:Number,
                    obj:String,
                    num:{
                        // 可以进行多个类型之的校验
                        type:[Number,String,Boolean],
                        // 自定义校验器规则
                        validator(val){
                            return val>100
                        }
                    },
                    // 默认值
                    stu:{
                        type:Array,
                        default(){
                            return [2,5,8]
                        }
                    }
    
               },
    
               template:`
               <div>
                我是子组件
                {
       {age}}----{
       {typeof obj}}
                {
       {obj}}----{
       {typeof obj}}
                {
       {num}}----{
       {typeof num}}
                {
       {stu}}----{
       {typeof stu}}
                </div>
               `,
               data(){
                return{}
    
            },
                  };
            
    		new Vue({
                components:{
     
                    'my-child':child
                },
    			el:"#app",
    			data:{
    				msg:'我是父组件'
    			},
    			methods:{}
    		})
    	</script>
    </body>
    </html>

![72ee06705ac5498aaa0b98707d8c7fa5.png][]

### 1.2 子给父传： ###

#### 1.在子组件内部使用$emit发射自定义事件和传递给父组件的值   2.在父组件内声明自定义事件接受参数 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
    </head>
    <body>
    	<div id="app">
            
    		<my-child @my-event="handler"></my-child>
    
    
        </div>
    	<script>
            let child={
                template:`
                <div>我是子组件
                    <button @click='toSend'>子传值给父</button>
                    </div>
                `,
                data(){
                    return{
                        msg:'我是子组件-----我要给父组件传值'
                    }
    				
    			},
    			methods:{
                    toSend(){
                        // 1.组件给父组件传值 通过$emit 发射(自定义事件) 
                        // $emit('发射事件的名称'，传递的参数)  发射事件
                        this.$emit('my-event',this.msg)
                        
                    }
                }
    
            }
    		new Vue({
     
                components:{
                    'my-child':child
                },
    			el:"#app",
    			data(){
                    return{
                        msg1:'我是父组件'
                    }
    				
    			},
    			methods:{
                   handler(a){
                    console.log(a,'这是子组件的值')
                   }
                }
    		})
    	</script>
    </body>
    </html>

![aef7195eed2c4ee0804a7e01b753f4d4.png][]

## 二 兄弟组件通信 ##

### 2.1声明一个事件总线 Bus.js ###

import Vue from 'vue';
    export default new Vue();

### 2.2 引入事件总线 ###

import Bus from 'xxx.js'

### 使用事件总线发射事件$emit发射数据出去 ###

Bus.$emit(自定义事件名称，发射的数据)

### 2.3引入事件总线 ###

Bus.$on(自定义事件的名称，(形参--就是发射的数据)=>{
    })

#### Brother1: ####

<template>
        <div>
            {
       {msg1}}
            <button @click="handler">传值给Brother2</button>
        </div>
    </template>
    <script>
        // 导入事件总线
        import Bus from '../eventBus';
    export default {
        data(){
            return{
                msg1:'这是Brother1组件',
                Brother2:'这是兄弟组件Brother2'
    
            }
        },
        methods:{
            handler(){
                // 1.兄弟组件使用$emit 发射事件
                Bus.$emit('toBother',this.Brother2)
            }
        }
    }
    </script>

#### Brother2: ####

<template>
        <div>
            {
       {msg2}}
        </div>
    </template>
    <script>
        import Bus from '../eventBus'
    export default {
        data(){
            return{
                msg2:'Brother2组件'
            }
        },
        created(){
            Bus.$on('toBother',(a)=>{
                console.log(a,'这是Bother1传给我的值');
            })
        }
    }
    </script>

#### App: ####

<template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />
     
          <Brother1/>
        <hr />
    
          <Brother2/>
    
      </div>
    </template>
    
    <script>
    import Brother1 from './components/Brother1.vue';
    import Brother2 from './components/Brother2.vue'
    export default {
      name: "App",
      components: {
       
        Brother1,
        Brother2 
    
      },
      data(){
        return {
         
        }
      },
     
    };
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![f2d7b6b6a71441dd8878de404a94bc79.png][]

## 三 祖孙组件通信 ##

### 3.1由祖先组件使用provide方法传递数据 ###

provide(){
    return{"msg":this.msg}
    }

### 3.2 由子孙组件使用inject注入数据 ###

inject:["msg"]

#### 孙组件 Brother1Child: ####

<template>
        <div>
            {
       {msg4}}----age:{
       {age}}----{
       {msg}}----num:{
       {num}}
            
            <button @click='age=30'>点击子组件修改父组件age的值</button>
            <hr>
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
                msg4:'Brother1组件的子组件'
            }
        },
        // 注入数据 inject
        inject:['msg','num'],
        props:['age']
    }
    </script>

#### 父组件 Brother1 ####

<template>
        <div>
          
            <Brother1Child :age='age' />
            Brother1 age:{
       {age}}
            <button @click="age=22">点击父组件修改子组件age</button>
    
        </div>
    </template>
    <script>
        // 导入事件总线
        import Bus from '../eventBus';
        import Brother1Child from './Brother1Child';
    export default {
        components:{
            Brother1Child
        },
        data(){
            return{
                msg1:'这是Brother1组件',
                age:18
    
            }
        },
       
        
    }
    </script>

#### 祖先组件 Grandfather ####

<template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />
       
          <Brother1/>
      
    
      </div>
    </template>
    
    <script>
    
    import Brother1 from './components/Brother1.vue';
    
    export default {
      name: "App",
      components: {
      
        Brother1,
        
    
      },
      data(){
        return {
          msg:'我是祖先组件',
          num:888
    
        }
      },
      // 祖先组件使用provide方法提供传递得数据
      provide(){
        return {
          "msg":this.msg,
          "num":this.num
        }
      }
    };
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![a841abd2b6504b538d003ae6dd13c2b0.png][]

## 单向数据流(数据更改的方向)： ##

#### 点击父组件修改子组件age： ####

![5764c2b95b9147009369f6ca2e648b8e.png][]

#### 点击子组件修改父组件age的值 出现了报错 ####

![4a4e329a79ca4029aa7a33552ffca370.png][]

####  ####

## 单向数据流(数据更改的方向)小结: ##

## 父组件可以改给子组件的数据   子组件不可以改父组件的数据 ##

[72ee06705ac5498aaa0b98707d8c7fa5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/aa3b92a9e1be4ca7b00b418aaafb2fcf.png
[aef7195eed2c4ee0804a7e01b753f4d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1adc093c23fe42a08bcd75b3eeeffc25.png
[f2d7b6b6a71441dd8878de404a94bc79.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/204ce8cbfc794f909ee7f0ad765b2dd8.png
[a841abd2b6504b538d003ae6dd13c2b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1fedb6c6f30e4c7489c6397f483c7a48.png
[5764c2b95b9147009369f6ca2e648b8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/71d768ac0a974a7aa76f47e45722d42a.png
[4a4e329a79ca4029aa7a33552ffca370.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/811857e577184662b3fa5a8a0c823e89.png