Vue使用插槽slot、自定义事件内容分发

代码实现


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
head>
<body>

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title">todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index"
                    v-on:remove="removeItem(index)">todo-items>
    todo>
div>


<script>

    Vue.component("todo", {
      
        template: '
\n' + ' \n' + '
    \n' + ' \n' + '
\n'
+ '
'
}); Vue.component("todo-title", { props: ['title'], template: '
{ {title}}
'
}); Vue.component("todo-items", { props: ['item', 'index'], template: '
  • { {item}}   
  • '
    , methods: { remove: function (index) { this.$emit('remove', index); } } }); var vm = new Vue({ el: '#app', data: { title: 'jyuxuan', todoItems: ['Java', 'JavaWeb', 'JavaEE'] }, methods: { removeItem(index) { this.todoItems.splice(index, 1); } } })
    script> body> html>

    你可能感兴趣的:(Vue)