内容分发与自定义事件

学习完整课程请移步 互联网 Java 全栈工程师

本节视频

  • 【视频】Vue 渐进式 JavaScript 框架-Vue-布局篇-内容分发与自定事件
  • 【视频】Vue 渐进式 JavaScript 框架-Vue-入门总结

Vue 中的内容分发

在 Vue.js 中我们使用 元素作为承载分发内容的出口,作者称其为 插槽,可以应用在组合组件的场景中

利用插槽功能实现一个组合组件

比如准备制作一个待办事项组件(todo),该组件由待办标题(todo-title)和待办内容(todo-items)组成,但这三个组件又是相互独立的,该如何操作呢?

定义一个名为 todo 的待办事项组件

Vue.component('todo', {
    template: '
\ \
    \ \
\
' });

该组件中放置了两个插槽,分别为 todo-titletodo-items

定义一个名为 todo-title 的待办标题组件

Vue.component('todo-title', {
    props: ['title'],
    template: '
{{title}}
' });

定义一个名为 todo-items 的待办内容组件

Vue.component('todo-items', {
    props: ['item', 'index'],
    template: '
  • {{index + 1}}. {{item}}
  • ' });

    实例化 Vue 并初始化数据

    var vm = new Vue({
        el: '#vue',
        data: {
            todoItems: ['《刀剑神域3》', '《关于我转生成为史莱姆这件事》', '《实力至上主义教室》']
        }
    });
    

    HTML

    今日动漫推荐
    • 1. 《刀剑神域3》
    • 2. 《关于我转生成为史莱姆这件事》
    • 3. 《实力至上主义教室》

    此时,我们的 todo-titletodo-items 组件分别被分发到了 todo 组件的 todo-titletodo-items 插槽中

    测试效果

    使用自定义事件删除待办事项

    通过以上代码不难发现,数据项在 Vue 的实例中,但删除操作要在组件中完成,那么组件如何才能删除 Vue 实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用 this.$emit('自定义事件名', 参数),操作过程如下

    修改创建 Vue 实例代码

    var vm = new Vue({
        el: '#vue',
        data: {
            todoItems: ['《刀剑神域3》', '《关于我转生成为史莱姆这件事》', '《实力至上主义教室》']
        },
        methods: {
            // 该方法可以被模板中自定义事件触发
            removeTodoItems: function (index) {
                console.log("删除 " + this.todoItems[index] + " 成功");
                // splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目,其中 index 为添加/删除项目的位置,1 表示删除的数量
                this.todoItems.splice(index, 1);
            }
        }
    });
    

    增加了 methods 对象并定义了一个名为 removeTodoItems 的方法

    修改 todo-items 待办内容组件的代码

    Vue.component('todo-items', {
        props: ['item', 'index'],
        template: '
  • {{index + 1}}. {{item}}
  • ', methods: { remove: function (index) { // 这里的 remove 是自定义事件的名称,需要在 HTML 中使用 v-on:remove 的方式指派 this.$emit('remove', index); } } });

    增加了 元素并绑定了组件中定义的 remove 事件

    修改 todo-items 待办内容组件的 HTML 代码

    
    

    增加了 v-on:remove="removeTodoItems(index)" 自定义事件,该事件会调用 Vue 实例中定义的名为 removeTodoItems 的方法

    测试效果

    完整的 HTML

    
    
    
        
        布局篇 内容分发与自定义事件
        
    
    
    
    

    你可能感兴趣的:(内容分发与自定义事件)