02 vue.js2.5——Vue中的组件，实现todolist

最新推荐文章于 2019-09-12 15:46:15 发布

王小扣

最新推荐文章于 2019-09-12 15:46:15 发布

阅读量820

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_29150765/article/details/81300592

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

TodoList功能开发

例子：输入字符，在列表中显示；

由于有v-for属性，<li>不会被渲染，它已经和数据绑定在一起，有数据来决定

input和button上都有事件监听器，input是通过v-model对数据进行双向绑定；button是监听click事件绑定

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

无数据时：

有数据时：

TodoList中组件拆分

组件：页面上的某一部分，将大型网页拆分成几个部分

定义组件：

全局：Vue.component('todo-list(组件名称)',{ })；只用组件<todo-list></todo-list>

局部：定义var+声明componts

组件之间的通信：父子组件之间

组件实现的例子：将<li>标签拆成一个组件

(item,index) of list；固定写法 (内容，下标) of 数组 ，和item，index名称无关
父组件Vue根实例，通过数据list的改变，调用子组件todo-itemfull，并且通过属性:content 来传值，子组件li标签的渲染任然通过数据list来决定，实现父组件向子组件之间的通信

<body>
<div id="root">
    <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
        <ul>
            <!--使用全局组件-->
            <todo-itemfull v-for="(item,index) of list" :key="index" :content="item"></todo-itemfull>

        </ul>
        <ul>
            <!--使用局部组件-->
            <todo-itemonly></todo-itemonly>

        </ul>
    </div>
</div>
<script>
    // 定义全局组件
    Vue.component('todo-itemfull', {
        // 接受名为content的属性
        props:['content'],
        // 组件模板
        template: '<li>{{content}}</li>'
    });
    // 定义局部组件
    var TodoItem = {
        template: '<li>局部组件</li>'
    }
    // vue实例
    new Vue({
        el: "#root",
        data: {
            inputValue: '',
            list: []
        },
        // 声明局部组件
        components: {
            'todo-itemonly': TodoItem
        },
        methods: {
            handleSubmit: function () {
                this.list.push(this.inputValue);
                this.inputValue = '';
            }
        }
    })
</script>

组件与实例之间的关系

每个组件都是Vue的一个实例

Vue项目就是由一个个实例构建成的

每个实例或者组件都有：props、data、template、methods等属性

根实例的模板若没有定义，则挂载点中的内容就是它的模板

实现TodoList的删除功能

子组件显示与否，取决于父组件的list；实现子组件向父组件之间的通信

父组件通过属性向子组件传递数据；通过数据渲染子组件的模板，数据list为空时，页面中没有子组件的内容，
$emit子组件向外部进行发布delet事件，并且带上参数
父组件在子组件创建时，绑定监听delete事件
监听到子组件的delete删除事件，修改数据list
数据list改变，子组件的渲染内容发生改变

<body>
<div id="root">
    <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
        <ul>
            <!--使用全局组件-->
            <todo-itemfull
                    v-for="(item,index) of list"
                    :key="index"
                    :content="item"
                    :index="index"
                    @delete="handleDelete"
            ></todo-itemfull>
        </ul>
    </div>
</div>
<script>
    // 定义全局组件
    Vue.component('todo-itemfull', {
        // 接受名为content的属性
        props: ['content', 'index'],
        // 组件模板
        template: '<li @click="handleClick">{{content}}  {{index}} </li>',
        methods: {
            handleClick: function () {
                // $emit子组件向外部进行发布
                this.$emit('delete', this.index,this.content);
            },
            handleDelete:function(){
                return '子组件方法';
            }
        }
    });
    // vue实例
    new Vue({
        el: "#root",
        data: {
            inputValue: '',
            list: []
        },
        methods: {
            handleSubmit: function () {
                this.list.push(this.inputValue);
                this.inputValue = '';
            },
            handleDelete: function (index,content) {
                alert(content);
                this.list.splice(index);
            }
        }
    })
</script>
</body>

王小扣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02 vue.js2.5——Vue中的组件，实现todolist

TodoList功能开发例子：输入字符，在列表中显示；由于有v-for属性，<li>不会被渲染，它已经和数据绑定在一起，有数据来决定input和button上都有事件监听器，input是通过v-model对数据进行双向绑定；button是监听click事件绑定<body><div id="root"> <div> ...
复制链接

扫一扫