zoukankan      html  css  js  c++  java
  • $event的使用场景

    1、作为事件对象【原生事件】

        <button @click="handleClick">按钮</button>
        <el-button @click="handleClick($event)">按钮</el-button>
      methods: {
        handleClick(e) {
          console.log('事件对象', e)
        }
      }

      事件函数如果不写括号,默认参数为事件对象e

      如果写了括号,需要获取事件对象e必须要传入$event

    2、子组件中通过$emit触发父组件的事件,传过来的参数,通过$event接收【自定义事件】

    Btn组件:

    <template>
      <el-button @click="$emit('btn',100,200)">子组件按钮</el-button>
    </template>

    使用:

        <Btn @btn='handelBtn'></Btn>
        <Btn @btn='handelBtn($event)'></Btn>

    效果:

      

      事件函数如果不写括号,默认接收全部参数

      如果写了括号,还需要接收到子组件的参数,必须要传入$event,并且$event只会接收到子组件传来的第一个参数(子组件那边如果有多个参数最好以对象的形式传到父组件)

    v-model语法糖:

        <MyInput v-model="name"></MyInput>
        <MyInput :value='name' @input='name=$event'></MyInput>

      v-mode='name' 是 :value='name' @input='name=$event' 的语法糖,这里的$event就是子组件中$emit('input', val)传来的val

  • 相关阅读:
    Linux基础命令
    python中eval的用法
    man命令手册打开以后的使用方法
    Sequel Pro(连接mysql数据库)的下载和使用
    pycharm里连接mysql
    python里的路径拼接
    第一个接口自动化框架atp
    使用yaml(yml)写用例
    计算机及Linux简介
    xpath和css selector
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15190963.html
Copyright © 2011-2022 走看看