欢迎阅读『Tag标签列表』

vue子组件向父组件传值 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vuev2.5.21.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button @click="BtnClick">提交</button>
        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item 
                v-bind:content="item" 
                v-bind:index="index"
                v-for="(item,index) in list"
                @delete="handleItem" >
            </todo-item>

        </ul>
    </div>
    <script>
        // Vue.component("TodoItem",{
        //     props:["content"],
        //     template:"<li>{{content}}</li>"
        // });
        var todoItem = {
            props: ["content","index"],
            template: "<li @click='BtnClick'>{{content}}</li>",
            methods: {
                BtnClick: function () {
                   // alert("我传值了")
                   this.$emit("delete",this.index);
                }
            }
        };
        var app = new Vue({
            el: "#app",
            components: {
                TodoItem: todoItem
            },
            data: {
                inputValue: "",
                list: [],
            },
            methods: {
                BtnClick: function () {
                    //   console.log(this.list);
                    this.list.push(this.inputValue);
                    this.inputValue = "";
                },
                handleItem:function(index){
                 //alert(index)
                 this.list.splice(index,1);
                  
                }
            }
        })
    </script>

</body>

</html>

 

posted @ 2018-12-29 20:16  兔子零-A酱  阅读(392)  评论(0)  编辑  收藏  举报