Vue之自定义事件内容分发详解

1、小伙伴们这个理解起来有点复杂，希望仔细看里面的原理，自己去敲一遍：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <todo>
        <xian slot="xian" :title="title"></xian>
        // 建议从后面往前看，理解为遍历得到的值赋值给v-bind，v-bind的值赋值给props同名的值
        // [提醒]v-on:绑定的自定义事件名会自动变成小写，如果有人事件名用了大写，下面this.$emit里仍然是大写，会绑定不上
        <yu slot="yu" v-for="(item,index) in items"
            v-bind:item="item" v-bind:index="index"
            v-on:remove="deleteItems(index)"></yu>
        // Vue实例将数据和方法与View层绑定,View层在分发这些数据和方法到下面的组件绑定,View相当于中转了Vue实例的数据和方法交由组件控制
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    Vue.component("todo",{
       template:  '<div>\
                        <slot name="xian"></slot>\
                        <ul>\
                            <slot name="yu"></slot>\
                        </ul>\
                    </div>'
    });
    Vue.component("xian",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("yu",{// props是参数名，类似于变量名，可以随便定义，v-bind绑定的是变量，是数据，是定义的变量
        props: ['item','index'],
        // 只能绑定当前组件的方法
        template: '<li>{{index}}---->{{item}}<button @click="remove">delete</button></li>',
        methods: {
            remove: function (index) {
                // this.$emit 自定义事件分发
                // 【注意】this.$emit('事件名')这个事件名要使用kebab-case（短横线命名）方式，不要写成camelCased (驼峰式);
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: "作者",
            items: ['咸鱼翻身1','咸鱼翻身2','咸鱼翻身3']
        },
        methods: {
            deleteItems: function (index) {
                console.log("您删除了"+this.items[index]);
                this.items.splice(index,1);
            }
        }
    });
</script>

</body>
</html>

运行结果：

当我们点击删除就能删除任意的作者名字，这里我点击删除第二个，显示结果如下：

2、这里有一个图供大家理解：

理解大概是这样 组件和实例之间方法不能互调 而要删除的节点属于实例的属性 所以通过事件分发让组件中定义的方法转向实例中定义的方法 然后删除节点

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 玩转vue的slot内容分发

    vue的内容分发非常适合"固定部分+动态部分"的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会触发拉取更多内容的操作,因此我们可以把下拉loading做成一个有slot的插件. 单个Slot 在children这个标签里面放Dom,Vue不会理你,也就是不会显示,类似React:this.props.children. //父 <children> <span>12345<

  • 详解Vue学习笔记入门篇之组件的内容分发(slot)

    详解Vue学习笔记入门篇之组件的内容分发(slot)

    介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ message }} </child-component> mess

  • 详解Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做了一个项目,然后通过项目中的一些案例进行总结. 今天我们来说说 Vue 中的内容分发 <slot> ,首先 Vue 实现了一套内容分发的 API,这套 API 是基于当前的 Web Components 规范草案,将 <slot> 元素作为承载内分发内容的出口,内容分发是 Vue 中一

  • Vuejs第十一篇组件之slot内容分发实例详解

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <

  • Vue内容分发slot(全面解析)

    Vue内容分发slot(全面解析)

    前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" ).Vue实现了一个内容分发 API,参照了当前 Web 组件规范草案,使用特殊的 <slot> 元素作为原始内容的插槽.本文将详细介绍Vue内容分发slot 编译作用域 在深入内容分发 API 之前,先明确内容在哪个作用域里编译.假定模板为 <child-component> {{ message }} </chi

  • Vue之自定义事件内容分发详解

    Vue之自定义事件内容分发详解

    1.小伙伴们这个理解起来有点复杂,希望仔细看里面的原理,自己去敲一遍: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <todo> <xian

  • JS中自定义事件与观察者模式详解

    目录 一.前言 二.观察者模式优缺点 三.代码实现 四.DOM自定义事件API 一.前言 观察者模式 也称发布-订阅模式 . 模型-视图模式 .当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知依赖它的对象.观察者模式属于行为型模式. 观察者模式: 类似我们在微信平台订阅了公众号 , 当它有新的文章发表后,就会推送给我们所有订阅的人. 我们作为订阅者不必每次都去查看这个公众号有没有新文章发布,公众号作为发布者会在合适时间通知我们

  • SpringBoot实现自定义事件的方法详解

    目录 简介 步骤1:自定义事件 步骤2:自定义监听器 方案1:ApplicationListener 方案2:SmartApplicationListener 步骤3:注册监听器 法1:@Component(适用于所有监听器) 法2:application.yml中添加配置 法3:启动类中注册 步骤4:发布事件 法1:注入ApplicationContext,调用其publishEvent方法 法2:启动类中发布 简介 说明 本文用实例来介绍如何在SpringBoot中自定义事件来使用观察者模式

  • Vue.js自定义指令学习使用详解

    Vue.js自定义指令学习使用详解

    自定义指令 自定义指令的注册方法和组件很像,也分全局注册和局部注册,比如注册一个v-focus指令用于在<input>.<textarea>元素初始化时自动获得焦点,共有两种写法: //全局注册 Vue.directive('focus',{ //指令选项 }); //局部注册 var app = new Vue({ el: '#app', directive: { focus: { //指令选项 } } }); 自定义指令的选项是由几个钩子函数组成的,每个都是可选的. 自定义指令

  • Vue.directive自定义指令的使用详解

    很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法. 自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用. 1. 自定义指令实现拖拽 HTML: <div v-drag>我可以拖拽</div> JS: Vue.directive('drag', inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略 let oDiv=el; //el

  • Java事件处理机制（自定义事件）实例详解

    Java事件处理机制 java中的事件机制的参与者有3种角色: 1.event object:事件状态对象,用于listener的相应的方法之中,作为参数,一般存在与listerner的方法之中 2.event source:具体的事件源,比如说,你点击一个button,那么button就是event source,要想使button对某些事件进行响应,你就需要注册特定的listener. 3.event listener:对每个明确的事件的发生,都相应地定义一个明确的Java方法.这些方法都集

  • vue LogicFlow自定义边实现示例详解

    目录

  • vue自定义指令directive实例详解

    vue自定义指令directive实例详解

    下面给大家介绍vue自定义指令directive,具体内容如下所示: 官网截图实例 vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作,这个时候是自定义指令最合适的了. 来直接看例子:当页面加载时使得元素获得焦点(autofocus 在移动版 Safari 是不支持的),就是当页面加载好了,不做任何的操作使得表单自动获得焦点,光标自动在某个表单上代码如下: Vue.directive

  • Vue.directive()的用法和实例详解

    官网实例: https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html 指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中). update: 被绑定元素所在的模板更新

  • vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】

    本文实例讲述了vue使用自定义事件的表单输入组件用法.分享给大家供大家参考,具体如下: 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定. v-model的实现原理 : <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value&

随机推荐