- $emit的使用以及案列

功能描述

事件通知可以触发当前实例上的事件。附加参数都会传给监听器回调。

本例实现功能描述

本例实现了A组件上显示B组件，在B组件触发事件后影响到A组件页面的布局与一个提示框的出现，提示将触发数据刷新。

[!TIP|label: 定义homeInfo.vue]
我们以基础框架为基础，在src/views/basic/sys文件夹下新建一个homeInfo.vue文件并将其配置到菜单
配置菜单的具体方法见vue方式开发指南-部署与启动里面的菜单路由配置

<template>
  <div>
    <h1>主页详情</h1>
    <button type="text" @click="addData()">数据表单</button>
    <homeInfoAlert v-if="visible" ref="homeDataAdd" @refresh="alertMsg()"></homeInfoAlert>
  </div>
</template>
<script>
  import homeInfoAlert from './homeInfoAlert'
  export default {
    name: 'HomeVueInfo',
    data() {
      return {
        visible: false
      }
    },
    components: {
      homeInfoAlert
    },
    methods: {
      addData() {
        this.visible = true
      },
      alertMsg() {
        this.visible =false
        alert("刷新数据")
      }
    }
  }
</script>

[!TIP|label: 定义homeInfoAlert.vue]
再在src/views/basic/sys文件夹下新建一个homeInfoAlert.vue文件

<template>
  <div>
    <h1>数据表单界面</h1>
    <p>数据-----数据</p>
    <button @click="submit()"> 数据提交</button>
  </div>
</template>
<script>
  export default {
    name: "homeInfoAlert",
    methods: {
      submit() {
        this.$emit('refresh')
      }
    }
  }
</script>
<style scoped>
</style>