Vue中父子元件通訊——元件todolist

starof發表於2018-05-19
Vue元件

一、todolist功能開發

<div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <li v-for="(item, index ) of list" :key="index">{{item}} </li>
        </ul>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function(){
                this.list.push(this.inputValue);
                this.inputValue='';
            }
        }
    })
    </script>
View Code

二、todolist元件拆分

定義元件，元件和元件之間通訊

1、全域性元件

    <div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item></todo-item>
        </ul>
    </div>
    <script>

    Vue.component('todo-item',{
        template:'<li>item</li>'
    })
...

2、區域性元件

要註冊，否則會報錯：

vue.js:597 [Vue warn]: Unknown custom element: <todo-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

<!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="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item></todo-item>
        </ul>
    </div>
    <script>
    //全域性元件
    // Vue.component('todo-item',{
    //     template:'<li>item</li>'
    // })

    var TodoItem={
        template:'<li>item</li>'
    }
    new Vue({
        el:"#root",
        components:{
            'todo-item':TodoItem
        },
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function(){
                this.list.push(this.inputValue);
                this.inputValue='';
            }
        }
    })
    </script>
</body>
</html>
View Code

3、元件傳值

父元件向子元件傳值是通過屬性的形式。

<div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item 
                v-for="(item ,index) of list"
                :key="index"
                :content="item"
            ></todo-item>
        </ul>
    </div>
    <script>
    Vue.component('todo-item',{
        props: ['content'], //接收從外部傳遞進來的content屬性
        template:'<li>{{content}}</li>'
    })

    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function(){
                this.list.push(this.inputValue);
                this.inputValue='';
            }
        }
    })
    </script>

三、元件與例項的關係

new Vue()例項

Vue.component是元件

每一個Vue元件又是一個Vue的例項。

任何一個vue專案都是由千千萬萬個vue例項組成的。

每個vue例項就是一個元件，每個元件也是vue的例項。 

四、實現todolist的刪除功能

子元件通過釋出訂閱模式通知父元件。 

<div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item 
                v-for="(item ,index) of list"
                :key="index"
                :content="item"
                :index="index"
                @delete='handleDelete'
            ></todo-item>
        </ul>
    </div>
    <script>
    Vue.component('todo-item',{
        props: ['content','index'], //接收從外部傳遞進來的content屬性
        template:'<li @click="handleDeleteItem">{{content}}</li>',
        methods:{
            handleDeleteItem:function(){
                this.$emit('delete',this.index);
            }
        }
    })

    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function(){
                this.list.push(this.inputValue);
                this.inputValue='';
            },
            handleDelete:function(index){
                this.list.splice(index,1);
            }
        }
    })
    </script>

 

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/9061832.html 有問題歡迎與我討論，共同進步。

相關文章