vue04-局部组件

首先看代码：

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset="utf-8" />
    <title>Hello world</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 双向绑定  mvvm-->
        <input type="text" v-model="inputValue" />
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <to-do-item 
                v-bind:content="item" 
                v-bind:index=index
                v-for="(item, index) in list"
                @delete="handleItemDelete">
            </to-do-item>
        </ul>
    </div>

    <script>
        //局部组件，需要在下面vue实例中注册
        var ToDoItem = {
            props: ['content','index'], //父组件向子组件传值方法，这里接收
            template: "<li @click='handleItemClick'>{{content}}</li>",
            methods: {
                handleItemClick: function () {
                    //this.$emit("delete"); //子组件向父组件传值，触发一个事件  父组件用v-on做监听@，用一个监听方法
                    this.$emit("delete",this.index); //同时带一个参数,传给父组件
                }
            }
        }

        var app = new Vue({
            el: '#app',
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                },
                handleItemDelete: function(index){
                    this.list.splice(index,1); //删除
                }
            },
            components: {
                ToDoItem: ToDoItem
            }
        })
    </script>


</body>

</html>

首先定义一个局部组件，组件中的内容与全局组件一样：

        var ToDoItem = {
            props: ['content','index'],
            template: "<li @click='handleItemClick'>{{content}}</li>",
            methods: {
                handleItemClick: function () {
                    //this.$emit("delete"); 
                    this.$emit("delete",this.index);
                }
            }
        }

其实这不是一个组件，这只是一个json变量。需要在vue实例中注册

            components: {
                ToDoItem: ToDoItem
            }

效果与上一篇文章一样。

猜你喜欢