Vue中父子组件通讯——组件todolist

2018-06-24 02:06:57来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、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 有问题欢迎与我讨论,共同进步。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue数据双向绑定原理及简单实现

下一篇:js判断浏览器是否支持flash的方法