Vue中的消息传递

Vue中消息传递常见的发生在父组件与子组件之间，通过一个实例进行讲解。
就拿某图书销售网站侧边导航栏进行讲解。本实例中使用的前端框架为element-UI，重点是掌握父组件之间的传值。😊

1 .创建父组件

• 创建父组件Index.Vue

<template>
  <el-container>
    <el-aside style="width: 200px;margin-top: 20px">
      <SideMenu @indexSelect="listByCategory" ref="sideMenu"></SideMenu>
    </el-aside>
    
    <el-main>
     //这里放置的页面的中心部分
    </el-main>    
  </el-container>
</template>

<script>
//导入使用到的子组件
  import SideMenu from './SideMenu'
  import Books from './Books'
  export default {
    name: 'AppLibrary',
    //并在父组件中进行注册
    components: {Books, SideMenu},
    methods: {
      /* 通过图书所属类别进行分类展示*/
      listByCategory () {
        var _this = this
        /* 这里可以直接拿到子组件中的cid*/
        var cid = this.$refs.sideMenu.cid
        var url = 'categories/' + cid + '/books'
        this.$axios.get(url).then(resp => {
          if (resp && resp.status === 200) {
            _this.$refs.booksArea.books = resp.data
          }
        })
      }
    }
  }
</script>

在父组件中涉及到子组件的导入有以下两个知识点

• 使用import SideMenu from './SideMenu'导入子组件，这里的路径使用的是相对路径
• 导入完成之后，还要在components属性中进行注册

2.创建子组件

创建子组件SideMenu.vue文件

<template>
  <el-menu
    class="categories"
    default-active="0"
    @select="handleSelect"
    active-text-color="red">
    <el-menu-item index="0">
      <i class="el-icon-menu"></i>
      <span slot="title">全部</span>
    </el-menu-item>
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span slot="title">文学</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">流行</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-menu"></i>
      <span slot="title">文化</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-menu"></i>
      <span slot="title">生活</span>
    </el-menu-item>
    <el-menu-item index="5">
      <i class="el-icon-menu"></i>
      <span slot="title">经管</span>
    </el-menu-item>
    <el-menu-item index="6">
      <i class="el-icon-menu"></i>
      <span slot="title">科技</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
    export default {
      name: 'SideMenu',
      data () {
        return {
          cid: ''
        }
      },
      methods: {
      
          /*
        
          */
        handleSelect (key, keyPath) {
          this.cid = key
          this.$emit('indexSelect')
        }
      }
    }
</script>

<style scoped>
  .categories {
    position: fixed;
    margin-left: 50%;
    left: -600px;
    top: 100px;
    width: 150px;
  }
</style>

3.总结

现在我们将视野放在子组件中，当侧边栏被点击时，就会触发select方法，这个方法默认返回的回调参数为：

• key传入的是菜单子项的index属性的值，
• keyPath是当开启router模式的时候，使用index作为路径进行跳转

那么当我们在首页点击侧边栏时，就会触发子组件中的handleSelect（key,keyoath）方法，在该方法中，我们观察this.$emit('indexSelect')这个语句，

• 当select方法被触发时，子组件可以使用 $emit（“触发的指令”）触发父组件的自定义事件。

最后在子组件中我们定义下面参数
<SideMenu @indexSelect="listByCategory" ref="sideMenu"></SideMenu>
可以发现：

• @indexSelected是在子组件中定义的指令名称，@indexSelect子组件通过自定义指令触发父组件中的listByCategory()方法
• ref是将子组件注册为Vue实例，并且起名为sideMenu，实例化之后，父组件就可以this.ref.name调用子组件的所有方法

今天的收获虽然不大，但是也值得开心哦~~~~~
每天都是开心的。👀👀👀👀