Vue基础：插槽（slot），自定义事件内容分发（$emit('事件名',参数);

一，slot（插槽）

　　通俗的说：就是组件嵌套组件，被嵌套的组件插到相应的插座上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <todo>
        <!--v-bind可缩写成:-->
        <!--模板套模板-->
        <!--slot(插头)，插入相同名的插座（template的name）-->
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-item slot="todo-item" v-for="item in items" :item="item"></todo-item>
    </todo>

</div>



<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    Vue.component("todo",{
        <!--此处的name作用（可以看作是定义了一个插座），只有相同名的（slot）才能插入-->
        template:'<div>' +
            '<slot name="todo-title"></slot>' +
            '<ul>' +
            '<slot name="todo-item"></slot>' +
            '</ul>' +
            '</div>'
    })

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

    })

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


    var vm = new Vue({
        el:"#app",
        data:{
            title:"king，国王",
            items:["java","linux","c++","python"]
        }
    });

</script>
<!--小结：模板套模板，插头插插座-->
</body>
</html>

小结：组件嵌套组件，插头（子组件）插插座（父组件的允许你插的地方）

二，自定义事件内容分发

描述：首先，要知道Vue对象和组件两者是平行的关系，并不能直接的互相调用，需要第三方做桥梁（前端）

　　　前组件和vue对象协同的去处理

小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <todo>
        <!--v-bind可缩写成:-->
        <!--模板套模板-->
        <!--slot(插头)，插入相同名的插座（template的name）-->
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-item slot="todo-item" v-for="(item,index) in items"
                   :item="item" :index="index" v-on:remove="removeItems(index)"></todo-item>
    </todo>

</div>



<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    Vue.component("todo",{
        <!--此处的name作用（可以看作是定义了一个插座），只有相同名的（slot）才能插入-->
        template:'<div>' +
            '<slot name="todo-title"></slot>' +
            '<ul>' +
            '<slot name="todo-item"></slot>' +
            '</ul>' +
            '</div>'
    })

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

    })

    Vue.component("todo-item",{
        props: ['item','index'],
        <!--@click是v-on的简写-->
        template:'<li>{{index}}->{{item}}<button @click="remove">删除</button></li>',
        methods:{
            remove:function (index){
                this.$emit('remove',index);
            }
        }
    })
    

    var vm = new Vue({
        el:"#app",
        data:{
            title:"king，国王",
            items:["java","linux","c++","python"]
        },
        methods: {
            removeItems:function (index){
                this.items.splice(index,1);//一次删除一个元素
            }
        }
    });

</script>

</body>
</html>