search

1.2 组件基础及组件注册

  1. 组件就是一个可以复用的公共模块，相同的模块内容可以封装成一个独立的组件

  2. 简单的定义一个组件

    // js设置

	Vue.component('todo-item', {
            // 属性声明
            props: {
                title: String,  // 直接定义类型，没有默认值
                del: {
                    type: Boolean,  // 定义类型
                    default: false  // 默认值
                },
            },
            // 绑定对象 
            data: function() {
                return {}
            },
            // 方法
            methods: {

            },
            // 模板
            template: `
                <li>
                    <span v-if="!del">{{title}}</span>
                    <span v-else style="text-decoration: line-through;">{{title}}</span>
                    <button v-show="!del">删除</button>
                </li>
            `
        })

// html调用传参
	<ul>
            <todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
     </ul>

    备注：js内容中，这个例子里面只有props与template两个内容效

  3. 将整个内容定义封装，然后进行内容中传参

    // js定义组件
	Vue.component('todo-list', {
            template: `
                <ul>
                    <todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
                </ul>
            `,
            data: function() {
                return {
                    list: [{
                        title: '课程1',
                        del: false,
                    },{
                        title: '课程2',
                        del: true,
                    }]
                }
            }
        })

// html
<todo-list></todo-list>

    备注：是将整个todo-kist封装成一个组件后，在组件中设定了默认值操作

Previous1.1 第一个Vue程序Next1.3 Vue组件的核心概念：事件

Last updated