zoukankan      html  css  js  c++  java
  • 简单的组件传值

    父组件像子组件传值

    通过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>
  • 相关阅读:
    逆序对的相关问题:bzoj1831,bzoj2431
    bzoj3211,bzoj3038
    hdu 1179最大匹配
    hdu 3038带权并查集
    poj 1733离散化(map)+并查集
    codeforces 369B
    poj 1456
    POJ 1988相对偏移
    poj 1986tarjan模板题
    poj 1330lca模板题离线算法
  • 原文地址:https://www.cnblogs.com/tengteng0520/p/12057411.html
Copyright © 2011-2022 走看看