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

  • 相关阅读:
    require.js+bootstrap实现简单的页面登录和页面跳转
    require.js疑惑
    汉子转拼音(不支持多音字)
    require.js入门
    CSS+transform画动态表情
    nodejs的简单爬虫
    根据选择的省市区自动匹配邮政编码
    node将excel内容转json
    js实现省市区联动
    sql server 作业收缩数据库
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15190963.html
Copyright © 2011-2022 走看看