vue03-全局组件

首先看下面代码

<!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>
        //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>

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

猜你喜欢