vue04-局部组件

女爷i 2022-05-10 00:03 172阅读 0赞

首先看代码：

<!DOCTYPE html>
    <html lang=en>
    
    <head>
        <meta charset="utf-8" />
        <title>Hello world</title>
        <script src="vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            
            <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
                }

效果与上一篇文章一样。