創新實訓——005

本篇文章介紹Vue.js（以下簡稱vue）的組件化特性，非常好用

組件化

爲什麼當時我選擇了vue，因爲在我接觸爲數不多的前端框架中，vue的組件化特性驚豔到了我，組件化的意思就是指頁面是可以由一個個組件拼接起來的。
比如所有頁面都會有一個導航欄，那麼就可以將該導航欄單獨作爲一個組件，然後在App.vue中引入即可，導航欄作爲一個單獨組件navMenu.vue，代碼如下：

<!--導航欄組件-->
<template>
    <el-menu
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#1e1e1e"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router='true'>
      <el-menu-item index="/">總體概況</el-menu-item>
      <el-menu-item index="/statusPage">服務狀態</el-menu-item>
      <el-menu-item index="/securePage">安全審計</el-menu-item>
      <el-menu-item index="/ipPage">IP詳情</el-menu-item>
    </el-menu>
</template>
<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

然後在App.vue中註冊引入，如下所示：

<template>
  <div>
    <navMenu/>
    <router-view/>
  </div>
</template>

<script>
import navMenu from './components/PageComponents/navMenu'
export default {
  name: 'App',
  components:{
    navMenu
  }
}
</script>

然後這樣在路由中的所有頁面頂部都會有一個導航欄。

父組件向子組件傳值

vue中每個頁面都可以看成是一個組件，然後組件中可以嵌套組件，因此就可以分爲父組件與子組件，然後父子組件中可以相互傳值，而且並不複雜，這一點我感覺非常好，下面就先介紹一下父組件如何向子組件傳值。
假設父組件爲A，子組件爲B，首先子組件B中需要在props中定義從父組件傳過來的值，類似這樣：

<script>
  export default {
    props:{
        urlType:{type:String,default:"all"},
        logPara:{type:String,default:"----"}
    },
    data() {
      return {
      }
    }
  }
</script>

urlType和logPara就是父組件向子組件要傳的值，需要事先定義好類型和默認值，而且在子組件中不要改這兩個值（因爲父組件相當於級別高一些），這兩個值可以用this引用
然後在父組件A中<B :logPara="logPara" :urlType="urlType"></B>這樣傳值，logPara和urlType會實時反饋給子組件B，子組件可以用watch來監視這兩個值的變化，從而達成相關功能使用，watch之後再講，父組件向子組件傳值基本上就是這樣，下面介紹子組件向父組件傳值。

子組件向父組件傳值

假設父組件爲A，子組件爲B，B向A傳值，首先B中在傳值的地方例如需要這樣做：this.$emit('func',this.logPara)
目前就我的使用情況來說，傳的值必須在data的return中定義，然後func要與父組件相對應
父組件中爲<B @func="getDataFromChild"></B>，然後在methods中定義getDataFromChild:function(data)
此時若子組件有傳過來的值，父組件就可以接收data。
如果子組件要傳給父組件多個值，可以這樣，子組件：this.$emit('func',this.logPara1,this.logPara2…)，父組件：<B @func="getDataFromChild(arguments)"></B>和getDataFromChild:function(data)，此時父組件接收的值data爲一個數組，可用下標如data[0]形式調用對應的參數。
關於Vue.js的組件化特性介紹到此，不得不說，確實好用，因爲這樣組件可以複用！很多頁面可能都是由幾個相同的組件構成！