统计

随笔 - 400
文章 - 16
评论 - 6
阅读 - 83355

欢迎加入刚建立的社区：http://t.csdn.cn/Q52km
加入社区的好处：
1、专栏更加明确、便于学习
2、覆盖的知识点更多、便于发散学习
3、大家共同学习进步
3、不定时的发现金红包（不多哈）

文章目录

10 、插槽内容
11 、自定义事件

10 、插槽内容

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>插槽内容</title>
</head>
<body style="background-color: pink">

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in items" v-bind:item=item></todo-items>
    </todo>

</div>


<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:"<li>{{item}}</li>"
    });

    var app = new Vue({
        el:"#app",
        data:{
            title:"插槽1",
            items:['A','B','C']
        }
    })
</script>

</body>
</html>

11 、自定义事件

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

<my-component v-on:my-event="doSomething"></my-component>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>插槽内容</title>
</head>
<body style="background-color: pink">

<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 items" v-bind:item=item v-bind:index="index"  v-on:remove="removeItems"></todo-items>
    </todo>

</div>


<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:"<li>{{index}}=====>{{item}}&nbsp;&nbsp;<button v-on:click='remove'>删除</button></li> ",
        methods:{
            remove:function () {
                this.$emit("remove")
            }
        }
    });

    var app = new Vue({
        el:"#app",
        data:{
            title:"插槽1",
            items:['A','B','C']
        },
        methods: {
            removeItems:function (index) {
                this.items.splice(index,1)

            }
        }
    })
</script>

</body>
</html>