Vue.js 学习笔记（七）

事件监听
有点web基础的就知道click，keydown，keyup之类的事件，但他们是js原生的，框架再怎么使用，也只是对他们进行了个封装。vue提供了自定义事件，消息的订阅与发布模拟事件，slot标签
①自定义事件
vue的js函数：$on(eventname,function)（监听函数）,$emit( eventname , value)（触发事件的函数）
标签定义监听： v-on:eventname=“javascript”
上述的方式一般用于相邻（一个调用另一个或一个被另一个调用）的两个组件之间

特殊的使用$on时，一般在被监听的子标签上进行定义，如下

<template>
    <div>
      <children ref="children"/> //子标签
    </div>
</template>
<script>
  import children from './children'
    export default {
    comments:{children},
      mounted() {
        this.$refs.children.on(eventname,Function) //在组件挂载的时候，进行监听
      }
    }
</script>
<style scoped>
</style>

②消息的订阅与发布
需要通过npm安装一个依赖 pubsub-js
我记得命令式 npm install --save pubsub-js
该方法被使用的场景是两个组件之间通信，需要跨国山河大海（祖孙，同胞）
最主要的两个函数 publish(queuename , value) , subscribe(queuename,Function),分别为发布和订阅
示例如下(主要都是在js中进行，所以只展示script片段)：
监听

<script>
  import pubsub from 'pubsub-js'; //引入依赖
    export default {
      mounted() { //生命周期为挂载时执行
        pubsub.subscribe(queuename , (name , value)=>{ //第一个参数为队列名称，第二个参数为回调函数，但是回调函数中的第一个参数是队列名称，第二个参数是发布的数据
        })
      }
    }
</script>

发布

<script>
  import pubsub from 'pubsub-js';
  export default {
    methods : {
      click(){
        pubsub.publish(queuename, value) //一般都在methods中，出发了什么事件，然后进行发布
      }
    }
  }
</script>

③slot标签
slot标签用于父子之间通信，slot标签会把子组件html暴露在父组件中，这时候一部分的回调函数，变量就可以直接使用
语法 ， 子标签：（主要在html中，所以只展示template片段）

<template>
  <div>
    <slot name="test"></slot> //定义槽位置
  </div>
</template>

父标签

<template>
  <div>
    <slot name="test"><button @click="add">{{msg}}</button></slot> //slot中的内容是子组件的html，但是写在父组件中，并且可以调用父组件的函数和变量，如msg和add函数
    </div>
</template>