vue学习笔记——插槽、自定义事件

最新推荐文章于 2024-09-25 14:18:29 发布

ChienAAAy

最新推荐文章于 2024-09-25 14:18:29 发布

阅读量642

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_29384339/article/details/107762984

版权

插槽slot

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将元素作为承载分发内容的出口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    Vue.component("todo",{
        template: '<div>\
                         <slot name="todo-title"></slot>\
                          <ul>\
                              <slot name="todo-items"></slot>\
                          </ul>\
                   </div>'

    })

    Vue.component("todo-title",{
        props:['title'],
        template: '<div>{{title}}</div>'
    })

    Vue.component("todo-items",{
        props:['item'],
        template: '<h3>{{item}}</h3>'
    })


    var vm = new Vue({
        el:"#app",
        data:{
            title:"插槽slot",
            todoItems:['Java','spring','ssm']
        }
    })
</script>
</html>

自定义事件

当子组件需要向父组件传递数据时，就要用到自定义事件。指令 v-on 除了监听 DOM 事件外，还可以用于组件之间的自定义事件。
Vue 组件也有与之类似的一条模式，子组件用 on()来监听子组件的事件。
使用this.$emit(‘自定义事件名’,参数),

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    v-bind:item="item" v-bind:index="index" v-on:remove="removeItem(index)"></todo-items>
    </todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    Vue.component("todo",{
        template: '<div>\
                         <slot name="todo-title"></slot>\
                          <ul>\
                              <slot name="todo-items"></slot>\
                          </ul>\
                   </div>'

    })

    Vue.component("todo-title",{
        props:['title'],
        template: '<div>{{title}}</div>'
    })

    Vue.component("todo-items",{
        props:['item','index'],
        template: '<h3>{{index}}---{{item}} <button @click="remove">删除</button></h3>',
        methods:{
            remove:function (index) {
                //this.$emit 自定义事件分发
                this.$emit('remove',index)
            }
        }
    })


    var vm = new Vue({
        el:"#app",
        data:{
            title:"插槽slot",
            todoItems:['Java','spring','ssm']
        },
        methods:{
            removeItem:function (index) {
                console.log("删除了"+this.todoItems[index]+"OK")
                this.todoItems.splice(index,1)//一次删除一个元素
            }
        }
    })
</script>
</html>