vue totolist 案例

最新推荐文章于 2024-03-29 10:27:25 发布

原创最新推荐文章于 2024-03-29 10:27:25 发布 · 534 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

web前端-Vue 专栏收录该内容

29 篇文章

订阅专栏

一、案例：

    <div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="handleClick">提交</button>
            <br>
            <ul>
                <li v-for="(item,index) of list" :key="index">
                    {{item}}
                </li>
            </ul>
        </div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                inutValue: '',
                list: []

            },
            methods: {
                handleClick: function() {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                }
            }

        })
    </script>

methods 方法里，通过 this.list.push(this.inputValue) 添加输入框里输入的子项，每次输入后，this.inputValue = ''清空掉前面输入的内容

二、todolist组件拆分

    <div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="handleClick">提交</button>
            <br>
            <ul>
                <!-- <li v-for="(item,idnex) of list" :key="index">
                    {{item}}
                </li> -->
                <todo-item v-for="(item,index) of list" :key="index" :content="item">
                </todo-item>
            </ul>
        </div>
    </div>

    <script>
        //全局组件
        Vue.component('todo-item', {
            props: ['content'],
            template: '<li>{{content}}</li>'
        })

        new Vue({
            el: "#root",
            data: {
                inputValue: '',
                list: [],

            },
            methods: {
                handleClick: function() {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                }
            }

        })
    </script>

当然也可以写成局部组件，如下：

<script>
        //全局组件
        // Vue.component('todo-item', {
        //     props: ['content'],
        //     template: '<li>{{content}}</li>'
        // })

        //局部组件
        var TodoItem = {
            props: ['content'],
            template: '<li>{{content}}</li>'
        }
        new Vue({
            el: "#root",
            components: { //局部组件需此定义
                'todo-item': TodoItem
            },
            data: {
                inputValue: '',
                list: [],

            },
            methods: {
                handleClick: function() {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                }
            }

        })
    </script>

通过props向子组件传递数据 props: ['content']。

组件即实例，可以添加methods等属性：

//局部组件
        var TodoItem = {
            props: ['content'],
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function() {
                    alert("clicked");
                }
            }
        }

三、todolist删除功能

    <div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="handleClick">提交</button>
            <br>
            <ul>
                <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete">
                </todo-item>
            </ul>
        </div>
    </div>

    <script>
        //全局组件
        Vue.component('todo-item', { //子组件
            props: ['content', 'index'],
            template: '<li @click="handleClick">{{content}} --- {{index}}</li>',
            methods: {
                handleClick: function() { //点击子组件触发事件
                    this.$emit('delete', this.index) //emit发布订阅，子组件触发父组件delte
                }

            }
        })


        new Vue({ //父组件模板
            el: "#root",
            data: {
                inputValue: '',
                list: [],

            },
            methods: {
                handleClick: function() {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                },
                handleDelete: function(index) {
                    // alert(index)
                    this.list.splice(index, 1); //splice方法删除对应下标
                }
            }

        })
    </script>

父组件向子组件传递数据通过属性的方式，子组件向父组件传递数据通过$emit发布订阅模式。