Vue 进阶之路（十）
之前的文章介绍了 vue 的组件化，本章我们来看一下 vue 中组件的原生事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child @click="handleFatherClick"></child>
</div>
<script>
Vue.component("child", {
template: `
<p>child</p>
`
});
var app = new Vue({
el: '#app',
methods: {
handleFatherClick() {
console.log("father click")
}
}
})
</script>
</body>
</html>
如上图代码，我们在子组件 child 上绑定了一个 click 事件，并在父组件的 methods 中打印输出日志，结果在控制台并没有打印出我们想要的东西。这是由于现在的 click 事件是一个自定义的事件，并不是原生的 click 事件，这样的写法我们在父子组件间传值时使用过，如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child @click="handleFatherClick"></child>
</div>
<script>
Vue.component("child", {
methods: {
handleChildClick(){
console.log("child click")
}
},
template: `
<p @click="handleChildClick">child</p>
`
});
var app = new Vue({
el: '#app',
methods: {
handleFatherClick(){
console.log("father click")
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child @click="handleFatherClick"></child>
</div>
<script>
Vue.component("child", {
methods: {
handleChildClick() {
console.log("child click");
this.$emit('click');
}
},
template: `
<p @click="handleChildClick">child</p>
`
});
var app = new Vue({
el: '#app',
methods: {
handleFatherClick() {
console.log("father click")
}
}
})
</script>
</body>
</html>
在父子组件传值的文章中我们是通过 $emit 触发一个自定义事件，然后通过该自定义事件绑定在父组件的 methods 属性的方法上来传值的。在上面的代码中我们在子组件的 p 标签上绑定了一个 click 事件，该事件为原生事件，我们通过该事件的 handleChildClick() 方法，并通过 $emit 向外触发了一个 click 的事件，在 <child> 标签中，我们再通过父组件方法中的 handleFatherClick() 方法来绑定此触发事件，这样就可以运行父组件的 handleFatherClick() 事件了，如下结果：
当我们点击页面上的 child 时，根据日志输出可以看出：先触发子组件的原生 click 事件，然后通过子组件自定义的 click 事件向外触发的方式触发了父组件的 click 事件。
但是如果这样写看起来十分麻烦，那我们可不可以不通过子组件的自定义事件来触发父组件的 click 原生事件呢，Vue 官方为我恩提供了 native 原生事件方法，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child @click.native="handleFatherClick"></child>
</div>
<script>
Vue.component("child", {
template: `
<p>child</p>
`
});
var app = new Vue({
el: '#app',
methods: {
handleFatherClick() {
console.log("father click")
}
}
})
</script>
</body>
</html>
我们不通过子组件向外触发事件，而是直接在 <child> 标签上的 click 方法上加了 .native 属性，它的意思是触发父组件原生的 click 事件，这样就能达到和上面一样的效果。如下：
Vue 进阶之路（十）的更多相关文章
- Vue 进阶之路（九）
之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...
- Vue 进阶之路（八）
之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...
- Vue 进阶之路（七）
之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（六）
上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（五）
之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...
- Vue 进阶之路（四）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...
- Vue 进阶之路（三）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstNa ...
- Vue 进阶之路（二）
之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...
- Vue 进阶之路（一）
vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...
随机推荐
- hreeJS加载Obj资源后如何实现内存释放？
问题: 我利用ThreeJS做了一个在同一个场景下动态加载Obj的页面,具体功能是:点击按钮A:加载A模型,点击按钮B:加载B模型...现在的问题是,前面已经加载过的模型,无法实现释放,内存一直在累加 ...
- phython学习
Python 中文学习大本营 关于作者 赞助本站 The Python Tutorial (Python 2.7.X) 的中文翻译版本.Python Tutorial 为初学 Python 必备官方教 ...
- 求N的阶乘N!中末尾0的个数
求N的阶乘N!中末尾0的个数 有道问题是这样的:给定一个正整数N,那么N的阶乘N!末尾中有多少个0呢?例如:N=10,N=3628800,则N!的末尾有两个0:直接上干货,算法思想如下:对于任意一个正 ...
- BZOJ1221 [HNOI2001]软件开发 - 费用流
题解 非常显然的费用流. 但是建图还是需要思考的QuQ 将每天分成两个节点 $x_{i,1}, x_{i,2} $, $ x_{i,1}$用于提供服务, $x_{i ,2}$ 用来从源点获得$nd[i ...
- 老板说你的UI设计的不高级？你肯定没用这7个技巧...
对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候.也许你的公司并没有全职设计师,而需求上则要求设计出全新的UI:又或者你正在制作一个你自己的个人项目,而你希望它比 Bootstrap ...
- PS大神的作品，每张都是科幻大片!
相信大家在网上一定见过 各种PS的作品 但是要想成为“PS大神”, 不仅仅要会P图, 最关键的就是脑洞! 同样的马路破坏效果 在大神操作后变成了大片! 摩托车换成了骏马 这效果果然不一般! 这个绝对牛 ...
- eclipse新建web项目，发布 run as 方式和 new server然后添加项目方式。 后者无法自动编译java 成class文件到classes包下。
eclipse新建web项目,发布 run as 方式和 new server然后添加项目方式. 后者无法自动编译java 成class文件到classes包下. 建议使用run as - run ...
- 项目 solrcloud / zookeeper 搭建
财经道网站搜索引擎,数据快速检索,数据集群 功能描述:使用solr为项目数据库表p2p,银行理财,基金,贷款,信托,保险等建立数据索引,实现数据的导入,增量索引.实现检索建议和数据的快速查找.使用zo ...
- linux 静态链接库demo
目录结构 ./main.c #include<stdio.h> #include "./lib/jtlib1.h" int main() { pr ...
- 2018.07.03 POJ 3348 Cows（凸包）
Cows Time Limit: 2000MS Memory Limit: 65536K Description Your friend to the south is interested in b ...