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

Z时代
2024-01-10
分类：综合

vue

<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>