欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-21 11:22:47
一、todolist功能开发

  • 一、todolist功能开发

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

    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.

    Vue中父子组件通讯——组件todolist
    <!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 有问题欢迎与我讨论，共同进步。

上一篇： C# 二维码/条形码入门操作

下一篇： SQLServer之修改PRIMARY KEY

推荐阅读