Vue基礎：插槽（slot），自定義事件內容分發（$emit('事件名',參數);

本文轉載自查看原文 2020-11-21 12:59 586 Vue

一，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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用Vue的slot插槽分發父組件內容實現高度復用、更加靈活的組件使用slot分發內容作用域插槽 Form-Item Slot 自定義label內容 Form-Item Slot 自定義label內容 el-form-item 通過slot自定義label內容 vue click同時傳入事件對象和自定義參數 vue 的自定義事件 Vue自定義事件 vue 中 emit 觸發自定義組件事件報錯Custom event name ‘clickFather‘ must be kebab-case 原因內容分發slot的用法