vue 自定义事件

BaseButton组件
父里默认情况下对着封装的组件，加clcik事件无效。<base-button @click="del"></base-button>因为这不是原生的标签，而是一个组件。
而组件希望能够被 @事件名 的语法触发一些事件，就必须在组件内部用 5emt("事件名) 写这个事件名才能触发
所以，来到BaseButton这个组件内部，给按钮加一个点击事件，点击事件就通知父组件的事件触发。
<button @click="semit('click')" class="base-button" type="button"></button>

• 首先 在BaseButton子组件内部 通过$emit方式声明一个点击事件
• 在父组件中 @click指的接收到的子组件中自定义事件名 “del”是点击事件触发的行为

<BaseButtor @click='del'></BaseButton>

• 在method中 在具体说明del这个行为内容是什么

  methods:
  del(){
  alert("触发了");
  }

  例如：

在子组件中创建一个计数器组件：

<template>
    <div class="my-input-number">
      <!-- 递减 -->
      <span
        @click="sub"
        role="button"
        class="my-input-number__decrease"
        :class="{ 'is-disabled': num == 0 }"
      >
        -
      </span>
      <!-- 累加 -->
      <span
        @click="add"
        role="button"
        class="my-input-number__increase"
        :class="{ 'is-disabled': num == 10 }"
      >
        +
      </span>
      <div class="my-input">
        <!-- 数字显示区域 -->
        <span class="my-input__inner">{{ num }}</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        num: 0,
      };
    },
    methods: {
      // +号的点击事件
      add() {
        // 小于10才允许++
        if (this.num < 10) {
          this.num++;
        }
      },
  
      // -号的点击事件
      sub() {
        // 大于0才允许--
        if (this.num > 0) {
          this.num--;
        }
      },
    },
  };
  </script>
  
  <style>
  .my-input-number {
    position: relative;
    display: inline-block;
    width: 180px;
    line-height: 38px;
  }
  .my-input-number span {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
  .my-input-number .my-input {
    display: block;
    position: relative;
    font-size: 14px;
    width: 100%;
  }
  .my-input-number .my-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
  }
  .my-input-number .my-input-number__decrease,
  .my-input-number .my-input-number__increase {
    position: absolute;
    z-index: 1;
    top: 1px;
    width: 40px;
    height: auto;
    text-align: center;
    background: #f5f7fa;
    color: #606266;
    cursor: pointer;
    font-size: 13px;
  }
  .my-input-number .my-input-number__decrease {
    left: 1px;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid #dcdfe6;
  }
  .my-input-number .my-input-number__increase {
    right: 1px;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #dcdfe6;
  }
  .my-input-number .my-input-number__decrease.is-disabled,
  .my-input-number .my-input-number__increase.is-disabled {
    color: #c0c4cc;
    cursor: not-allowed;
  }
  </style>

在去附件进行组件的导入

主组件想拿到num的值需要在主组件data中定义num的值

<p>当前的数字是{{ num }}</p>
data(){
returnf{
num:0
}
}

那现在我们在父组件中定义了一个num 并且我们希望子组件中的num值与父组件中的num值一致 所以子组件中的num就要变成从父组件流入进去、

在子组件声明了需要从父组件流入一个num后 我们父组件就需要赋予这个num值给子组件

export deTault 1
data() {
return {
//把子组件原本的num注销掉
,/num:0,
},
// 在props里 ,声明一个从父组件 流入的num
props:{
num:{
type :Number ,
}
},

 子组件向父组件传递值需要通过侦听器 （在子组件中）

watch: {
num
()
this. $emit( ' changeNum' , this . num)

因为num值是变化的 所以通过watch侦听器来观察num值的变化 当num值改变 就调用侦听器里面的函数

”changeNum“是我们的自定义事件 也是父组件中要接收的事件 this.num是我们要传递过去的值

<base -number> : num=" num'
@changeNum=" changeNum" </base-numbe r>

 在父组件的methods中 具体阐述changeNum这个函数做什么事情：把接受到的从子组件传来的变化后的data值 作为参数val 赋予给 主组件定义的num

changeNun(val){
this.num=val
}