Vue.js实战：待办事项列表-优快云博客

本文链接：https://blog.youkuaiyun.com/Lin16819/article/details/100945146

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Vue</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" v-model="inputValue" />
        <button @click="handleBtnClick">提交</button>
        <ul>
            <todo-item :content="item"
                       :index="index"
                       v-for="(item, index) in list"
                       @delete="handleItemDelete">
            </todo-item>
        </ul>
    </div>
    <script>
        // 全局组件写法
        // Vue.component("TodoItem", {
        //     props: ['content'],
        //     template: '<li>{{content}}</li>'
        // });

        // 局部组件，要在根组件中注册
        var TodoItem = {
            props: ['content', 'index'],
            template: '<li @click="handleItemClick"> {{content}} </li>',
            methods: {
                handleItemClick: function(){
                    this.$emit('delete', this.index);
                }
            }
        }

        var app = new Vue({
            el: '#root',
            // 局部组件的注册
            components: {
                TodoItem: TodoItem
            },
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                },
                handleItemDelete: function(index){
                    // 数组的删除方法splice()
                    this.list.splice(index, 1);
                }
            }
        });
    </script>
</body>
</html>

Vue 1-组件间传值