事件的基本使用

事件的基本使用

  1、使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名。

  2、事件的回调需要配置在methods对象中,最终会挂到vue实例上

  3、methdos中配置的函数,不要使用箭头函数!否则this就不是vue实例了

  4、methods中配置的函数,都是被vue所管理的函数,this指向的是vue实例 或 是组件实例对象

  5、@click="demo"和@click="demo($event)" 效果一致,但后者可以传递参数

常见问题:

  方法可以写在data对象里吗?肯定是不行的 因为data里面的变量都是做了数据劫持,而函数只负责更改数据,所以必须写在methods里

推荐这些文章:

vue清空(初始化)组件data值

初始化所有数据

Object.assign(this.$data,this.$options.data())

 
使用上面方法时,有时候this的指向会出现问题,我们可以修改this的指向

Object.assign(this.$data,this.$options.data.call(this))

 
  
初始化某个对象数据

Object.assign(this.$data.xxx,this.$options.data().xxx)

  

...

vue中的$emit方法

使用场景:
  今天遇到一个需要在js中获取select标签中key和label值,但此时的select是自定义的封装ISelect,封装的方法中遇到$emit,特此总结一下
1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit,让父组件监听到自定义事件 。
vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn; 
封装的方法:

<el-select v-model="" :placeholder="" @chenge="doSelect"><...

vue methods中的函数调用时带括号与不带括号的区别

@click='getList(id)',但是为什么有时候明明没有传参的需要,却要加上()呢? 百思不得其解,于是去查阅了相关的资料,意思就是,当不加括号直接调用这个函数是可以直接获取到这个事件对象的,加了()要想获取这个事件对象就要手动的加$event ,具体的实现是这样的:
首先是不加括号的示范
(在html 中调用)

定义

然后在控制台中打印的结果是

就是说它这样是可以直接获取到这个事件对象的,
而另外一种情况加括号

然鹅打印的时候,你会发现是undefined ....

所以,此时你加了(),而又要获取这个事件对象的话,你就要手动加上$event,

像这样,你同样的能获取...

vue的组件的更新

在Vue组件中,可以用过once去监听所有的生命周期钩子函数,如监听组件的updated钩子函数可以写成 this.$on(‘hook:updated’, () => {})。 hook除了上面的运用外,还可以外部监听组件的生命周期函数。在某些情况下,我们需要在父组件中了解一个子组件何时被创建、挂载或更新。 比如,如果你要在第三方组件 CustomSelect 渲染时监听其 updated 钩子,可以通过@hook:updated来实现:
  
<template> <!--通过@hook:updated监听组件的updated生命钩子函数--&...

vue数据绑定问题

问题
:model是不是只能父传子,不能子传父
v-model是不是可以实现两个,
什么是双向绑定,双向绑定用在什么地方

最佳回答
适用于input输入框

...

vue的动态指令传参数

假设你有一个按钮,在某些情况下想监听单击事件,在某些情况下想监听双击事件。这时动态指令参数派上用场:
<template> <div> <aButton @[someEvent]="handleSomeEvent()" /> </div></template><script>export default { data () { return { someEvent: someCondition ? "click" : "dbclick" } }, methods: { hand...

vue中 关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit,让父组件监听到自定义事件 。
vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn; 
例如:子组件:
<template>
<div class="train-city">
<h3>父组件传给子组件的toCity:{{sendData}}</h3>
<br/><button @click='select(`大连`)'&g...

vue 中子组件更新父组件的方法

子组件可以通过传递事件,让父组件接受事件,在进行处理
也可以通过绑定model-value进行数据的双向绑定

...

vue 自定义组件事件

 

<template>
<div class="app">
<h1>{{msg}},学生姓名是:{{studentName}}</h1>

<!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
<School :getSchoolName="getSchoolName"/>

<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法,使用@或v-on) -->
...

在控制台改变vue demo 绑定值

javascript:(function(){
document.querySelectorAll('.demo')[0].querySelector('.el-textarea__inner').value='test';
document.querySelectorAll('.demo')[0].querySelector('.el-textarea__inner').dispatchEvent(new Event('blur'))
})()

可以 保存到浏览器收藏标签使用

<div class="home demo">
<el-i...

文章标题:事件的基本使用
文章链接:https://www.dianjilingqu.com/4299.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>