Slot插槽，自定义事件
Slot插槽，自定义事件
在Vue.js中我们使用 元素作为承载分发内容的出口，作者称其为插槽
自定义事件
数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用this.$emit(‘自定义事件名’,参数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--
1里的slot属性根据name指向2里的slot插槽
1里的title:
title插槽：
v-bind: title='title' 左边title指向3里的props，右边title指向5里的data中title,然后传给template
items插槽：
v-bind: item="item" 左边item指向4里的props，右边item指向5里的data中items遍历后的item（v-for后的）,然后传给template
删除操作：4中remove调用4中的remove方法，通过$emit指向了1中的自定义事件custom,然后调用了Vue实例中remove删除，删除了data中item元素
-->
<body>
<div id="app">
<!--1.-->
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item="item"
v-bind:index="index" v-on:custom="remove(index)"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
/*2*/
Vue.component("todo", {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
/*3*/
Vue.component("todo-title", {
props: ["title"],
template: '<div>{{title}}</div>'
});
/*4*/
Vue.component("todo-items", {
props: ["item", "index"],
template: '<li>{{index}}=={{item}} <button v-on:click="remove(index)">删除</button></li>',
methods: {
remove: function (index) {
this.$emit('custom', index);
}
}
});
/*5*/
var vm = new Vue({
el: '#app',
data: {
title: '课程表',
items: ["java", "php", "python"]
},
methods: {
remove: function (index) {
this.items.splice(index, 1);
}
}
});
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY