vue03-全局组件

客官°小女子只卖身不卖艺 2022-05-10 00:00 237阅读 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>
            //v-bind可以简写成:
            //v-on可以简写成@
    
            //创建全局组件的一个方法
            Vue.component("ToDoItem",{
                props:['content',"index"],,  //v-bind 绑定循环的item值，把值传进来的一种方式，外面传过来的数据接收
                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); //删除
                    }
                }
            })
        </script>
    
    
    </body>
    
    </html>

@就是v-on的缩写

: 就是v-bind的缩写

创建全局组件的方法是：

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

props: 向组件内部传值时定义的接收变量，例子中是接收item的值。 父组件向子组件传值的一种方式

template: 定义的模板的内容，这个模板也会一个vue实例，可以写vue的标签等

$emit: 触发父组件定义的delete方法，第二个参数表示传过去的参数，子组件向父组件传值的一种方式。

在父组件里面定义子组件，把content和index，传入子组件中，@delete监听子组件触发的delete事件，触发handleItemDelete方法。

<to-do-item 
                    v-bind:content="item" 
                    v-bind:index=index
                    v-for="(item, index) in list"
                    @delete="handleItemDelete">
                </to-do-item>

效果：点击列表时，就会把当前点击的数据删除。

![70][]

[70]: /images/20220510/b351b1afbcd84169a2e8dab82ed8fc15.png