Vue事件在组件中的简单使用以及子组件事件触发父组件自定义事件
Posted wenpeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue事件在组件中的简单使用以及子组件事件触发父组件自定义事件相关的知识，希望对你有一定的参考价值。
在Vue中，通过v-on 来监听DOM事件，可以通过@简写代替。
一个简单的在组件中的事件调用示例
- 在template的html中使用v-on或@监听一个click事件，并指定事件执行handleClick方法。
- handleClick需要在组件的methods集合中定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<todo-list></todo-list>
</div>
<script>
Vue.component("todo-list", {
template: `
<ul>
<todo-item v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
data: function() {
return {
list: [
{
title: "新课程1",
del: false
},
{
title: "新课程2",
del: true
},
{
title: "新课程3",
del: false
}
]
};
},
methods:{
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
<li>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">删除</button>
</li>`,
data: function() {
return {};
},
methods: {
handleClick(){
console.log("点击删除按钮！");
}
}
});
var vm = new Vue({
el: "#app",
data: {
}
});
</script>
</body>
</html>效果如下
组件的事件调用如何触发上级节点的事件？通过$emit来触发。
this.$emit('自定义事件名',参数);//参数如有多个，可以用逗号隔开继续增加，如this.$emit('自定义事件名',参数1,参数2)示例：组件todo-item上的事件，继续触发父组件todo-list上的自定义事件。
- 在事件方法handleClick中通过$emit继续触发父组件自定义事件。并传入参数title
this.$emit('delete',this.title);- 在父组件todo-list的template中的html中监听自定义事件@delete="handleDelete"或v-on:delete="handleDelete"
- 在父组件件todo-list的methods定义handleDelete方法(带参数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<todo-list></todo-list>
</div>
<script>
Vue.component("todo-list", {
template: `
<ul>
<todo-item @delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
data: function() {
return {
list: [
{
title: "新课程1",
del: false
},
{
title: "新课程2",
del: true
},
{
title: "新课程3",
del: false
}
]
};
},
methods:{
handleDelete(vtitle){
console.log("删除工程！",vtitle)
}
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
<li>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">删除</button>
</li>`,
data: function() {
return {};
},
methods: {
handleClick(){
console.log("点击删除按钮！");
this.$emit('delete',this.title);
}
}
});
var vm = new Vue({
el: "#app",
data: {
}
});
</script>
</body>
</html>Vue事件还提供了大量的事件修饰符
- .stop
- .prevent
- ....
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>Vue事件还提供大量的按键修饰符
如常用的回车提交
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">以上是关于Vue事件在组件中的简单使用以及子组件事件触发父组件自定义事件的主要内容，如果未能解决你的问题，请参考以下文章