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>
  • 相关阅读:
    根据数组对象中的某个属性值排序
    vue小知识
    vue项目中config文件中的 index.js 配置
    小问题
    原生无缝轮播
    webpack打包提交代码
    echarts
    面试问题
    MySql
    vue-router 跳转原理
  • 原文地址:https://www.cnblogs.com/tengteng0520/p/12057411.html
Copyright © 2011-2022 走看看