简单的组件传值

父组件像子组件传值

通过v-bind传递给子组件，子组件通过props对象接受绑定变量

子组件像父组件传值

通过this.$emit("delete",this.index)，用方法携带参数向外传递，外部通过事件监听来出发新的事件进行获取。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的组件传值</title>
<script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input type="text" v-model="todoValue"/>
            <button @click="handleBtnClick">提交</button>
        </div>
        <ul>
            <todo-item v-bind:content="item"
                       v-bind:index="index"
                       v-for="(item,index) in list"
                       @delete="handleItemDelete">
            </todo-item>
        </ul>
    </div>
    <script>
        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:{
                todoValue:"",
                list:[]
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.todoValue)
                    this.todoValue=""
                },
                handleItemDelete:function(index){
                    this.list.splice(index,1)
                }
            }
        })
    </script>
</body>
</html>

猜你喜欢