Vue学习笔记（三）

①组件自定义事件

vm.$emit()
触发实例上的事件，参数传给监听器回调
vm.$on()
监听当前实例上的自定义组件，通过vm.$emit触发
vm.$once()
监听一次当前实例的自定义组件
vm.$off(string|array)
移除自定义监听器

父组件
<school @setName="getName"></school>
getName(params){
  console.log(params)
}
子组件
this.$emit('setName',this.myName)

②全局事件总线

可以使得任意组件通信
设计思路，所有的组件都能看到，拥有$on、$emit和$off方法
利用Vue.component.prototype.__proto__ == Vue.prototype

beforeCreate(){
    Vue.prototype.$bus = this //全局事件总线
}
因为beforeCreate钩子函数，还未代理数据和methods放这里不会出现事件未定义，在组件通过$emit()发起，和$on绑定数据实现任意组件间的通信，注意在使用完成后要销毁事件。

③代理

跨域的处理方式之一代理，开启一个端口服务去访问，服务器的资源，因为不是浏览器发起，所以不存在跨域，然后在把，请求到的资源返回给浏览器。

devServer: {
    proxy : 'http://192.168.155.109:18561/'
    向指定地址发起请求，缺点会请求到public下的资源，不能代理多个地址
}

devServer: {
    proxy : {
    '/': {
      target: 'http://dangyuanejia.talkweb.com.cn/',
      ws: true, //打开webstock
      changeOrigin: true,   //是否模拟host请求地址
      pathRewrite: {
         '^/cpweixin-server': '/'
         请求地址配置到的字符串用/代替，避免请求到public下的资源
      }
    },
  }
},

④插槽

默认插槽
父组件
<school @setName="getName">
  <div>默认插槽</div>
</school>
子组件
<div>
    学生姓名{{myName}}
    <slot>我是默认插槽</slot>
</div>

具名插槽
父组件
<school> 
  <template v-slot:footer>
    <span>我是脚</span>
  </template>
</school>
子组件
<div>
    学生姓名{{myName}}
    <slot>我是默认插槽</slot>
    <slot name="footer"></slot>
</div>
v-slot:footer可以缩写为#footer
v-slot只能使用在template元素身上

作用域插槽
内容由子组件提供，父组件提供结构
父组件
<school @setName="getName" v-slot:default="{myName}">
  <div>默认插槽{{myName}}</div>
</school>
子组件
<slot :myName="myName">我是默认插槽</slot>

父组件会渲染好元素在插入子组件