美文网首页Vue
Vue组件基础

Vue组件基础

作者: ChangLau | 来源:发表于2018-08-24 16:41 被阅读0次

    Vue 组件

    • 声明组件
    Vue.component('hello-world', {
        data() {
            return {
    
            }
        },
        template: '<div>Hello World</div>'
    })
    <!-- 在根组件中使用组件,如果声明时名称为驼峰命名,在使用时也要使用如下方式 比如组件声明为helloWorld 标签应该写为 <hello-world> -->
    <div id="app">
        <hello-world></hello-world>
    </div>
    

    组件也是 Vue 的实例,也具有 data、methods、computed、created 等函数和生命周期钩子,唯一的区别是,组件没有 el 属性。

    • 组件复用
    <div id="app">
        <hello-world></hello-world>
        <hello-world></hello-world>
        <hello-world></hello-world>
    </div>
    <!-- 每个组件都维护了自己的数据count,每调用一次组件就会创建一个新的实例。所以data必须为函数,因此每个组件对象都可以维护一个返回对象的的独立拷贝。 -->
    Vue.component('hello-world', {
        data() {
            return {
                count: 0
            }
        },
        template: '<div @click="count++">Hello World{{count}}</div>'
    })
    

    Vue 组件的组织方式

    Vue组件树

    相关文章

      网友评论

        本文标题:Vue组件基础

        本文链接:https://www.haomeiwen.com/subject/rfhiiftx.html