创新实训——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的组件化特性介绍到此，不得不说，确实好用，因为这样组件可以复用！很多页面可能都是由几个相同的组件构成！