Vue---父子组件通信+子父组件通信+非父子组件通信

柔情只为你懂 2022-11-30 04:13 348阅读 0赞

### 父-子组件通信-props ###

*  父组件到子组件通信，通过props。子组件在props中定义要传的值，props有两种形式，一种是字符串数组形式，一种是对象形式。前者方式只是简单声明要传的值，后者可以指定每个要传的值的类型(type)、是否必传(required)，还可以设置默认值(default)。

子组件：

<template>
      <div class="head">
        <el-row>
          <el-col :span="24">
            <div class="head-con">
              <h2>{
       { msg }}</h2>
            </div>
          </el-col>
        </el-row>
      </div>
    </template>
    <script>
      export default {
        name: 'Head',
        //props : ['msg']        //形式一：字符串数组方式
        props : {                //形式二：对象方式，指明每个参数的详细信息
          msg : {
             type : String,    //参数类型
             default : '',     //默认值
             required : false  //是否必传：否
           }
        }
      }
    </script>
    
    <style scoped>
      .head-con{
        height : 40px;
        line-height : 40px;
        background-color : black;
        color : white;
        padding-left : 10%;
      }
      .head-con h2{
        margin : 0;
      }
    </style>

父组件：

<template>
      <div class="home">
          <Header :msg="mess" />
      </div>
    </template>
    
    <script>
      import Heade from "@/components/Head.vue"   //导入子组件
    
      export default {
        name: 'Home',
        components: {
          Header : Heade,	//使用子组件
        },
        data(){
          return {
            mess : 'Header'
          }
        }
      }
    </script>

## ##

### 子-父组件通信 ###

*  子组件传值到父组件可以通过自定义事件传递，子组件中使用$emit()  API来发射自定义事件，父组件使用v-on监听自定义事件。

子组件：

<template>
      <div class="query">
        <el-row>
          <el-col :span="12">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="年龄">
                <el-input v-model="form.age"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="primary" @click="query">查询</el-button>
        </el-row>
      </div>
    </template>
    <script>
    export default {
      name: "Query",
      data() {
        return {
          form: {
            name: "",
            age: "",
          },
        };
      },
      methods: {
        query() {
            //通过$emit传递事件给父组件
            this.$emit('query',this.form);   
        },
      },
    };
    </script>

父组件：

<template>
      <div class="home">
        <el-row>
          <el-col :span="12" :offset="6">
            <Query @query="queryData"/>
          </el-col>
        </el-row>
      </div>
    </template>
    
    <script>
    import Query from '@/components/Query'
    export default {
      name: "Home",
      data() {
        return {}
      },
      methods: {
        queryData(params){
          alert(params.name);
        }
      },
      components : {
        Query
      }
    };
    </script>

### 非父子组件通信 ###

*  非父子组件通信可以通过中央事件总线，中央事件总线：就是单独创建一个Vue实例对象，专门用来负责组件之间传值。A组件向B组件传值，则A组件通过 $emiit() 发射事件，B组件通过 $on() 接收值。

eventBus.js(文件名自定义)中创建中央事件总线：

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

将中央事件总线挂载到Vue原型上：

import eventBus from '@/utils/eventBus.js' 
    Vue.prototype.$eventBus = eventBus

A组件：

<template>
        <div>
           <el-input v-model="inp" style="width : 400px;" /> <br/>
            <el-button @click="send" type="primary">传值给组件Brot2</el-button>
        </div>
    </template>
    <script>
    export default {
        name : 'B1',
        data(){
            return {
                inp : ''
            }
        },
        methods : {
            send(){
                this.$eventBus.$emit('on-msg',this.inp); //传值
            }
        },
    }
    </script>

B组件：

<template>
        <div>
            {
       { dat }}
        </div>
    </template>
    <script>
    export default {
        name : 'B2',
        data(){
            return {
                dat : 'Brot2组件'
            }
        },
        mounted(){
            this.$eventBus.$on('on-msg',(dat) => { //接受值
                this.dat = dat;
            });
        }
    }
    </script>

父组件：

<template>
        <div class="brot">
            <h1>组件1：Brot1</h1>
            <Brot1 />
    
            <br /><br /><br /><br /><br />
            <h1>组件2：Brot2</h1>
            <Brot2 />
        </div>
    </template>
    <script>
    import Brot1 from '@/components/Brot1.vue'
    import Brot2 from '@/components/Brot2.vue'
    export default {
        name : 'Tes',
        data(){
        },
        methods : {
        },
        components : {
            Brot1,
            Brot2
        },
    }
    </script>