Communications and delete Vue child-parent assembly

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./js/vue.js"></script>　　//引入js
</head>
<body>
    <div id="app">
        <input v-model="inputValue"/>
        <button @click="handleSubmit">submit</button>

        <ul>
            <todo-item
                    v - for = "(Item, index) of list"　　// loop elements within the list out 
                    : Key = "index"　　　　　circulation list // vue needs to be added: key = "unique identification", otherwise there will be warning 
                    : Content = "item"
                    :index="index"
                    @delete="handleDelete"
            >
            </todo-item>
        </ul>
    </div>
</ body> 

// props parent may use the data to the subassembly. 
// use $ emit sub-assemblies can trigger a custom event of the parent component. 

// adding subscript index, publish and subscribe to events @delete when the body circulation 
// trigger a custom event $ emit when in the word components while calling handleDelete method, mass participation is the index

<script>
    // global components 
    // Vue.component ( 'TODO-Item', { 
    //      Template: '<Li> Item </ Li>' 
    // }) 
    // local assembly 
    var todoItem = {
        The props: [ 'Content', 'index' ],　　// The props for receiving the attribute data to the parent component subassembly 
        Template: '<@ Li = the Click "the handleClick"> {{Content}} </ Li>' ,
        methods: {
            handleClick(){
                the this . $ EMIT ( 'delete', the this .index)　　// Click handleClick method, trigger custom event delete
            }
        }
    } 
　　//This.$emit(event,arg) trigger events on the current instance

    new view ({
        el:"#app",
        components:{
          'TODO-Item' : todoItem　　// definition component
        },
        data:{
            list:[],
            inputValue:''
        },
        methods:{
            handleSubmit () {
                this.list.push(this.inputValue);
                this.inputValue=''
            },
            handleDelete(index){
                the this .list.splice (index, 1 )    // delete nowadays standard and median
            }
        }
    })
</script>
</ HTML> 
// class web page to learn Mu Dell teacher course notes, thanks to technology sharing Gangster
Communications and delete Vue child-parent assembly

Guess you like
