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

父-子元件通信-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>