Vue2中全局组件和私有组件

组件

• 组件就是页面中用到的一些功能模块的封装
• 注意
  • 组件的视图必须有一个唯一的根元素(vue-2x)

• 组件内部的data必须使用函数的方式返回一个数据对象: 为了避免组件多次调用之后产生数据 混乱

全局组件

• 在任何vue实例中都可以使用
• 定义

  // 定义全局组件
    Vue.component('my-header', {
        // 组件视图: 必须有一个唯一的根元素
        template: `
            <div class="container">
                <h1>{{title}}</h1>
                <h3 v-text="title"></h3>
                <button @click="updateTitle">update title</button> 
            </div>
        `,
        // 定义数据: 必须使用函数的方式返回一个数据对象
        data(){
            return {
                title:'全局自定义组件'
            }
        },
        methods: {
            // 按钮点击事件处理函数
            updateTitle() {
                this.title = 'hello component!!!';
            }
        }
    });

• 调用: 当做自定义标签来调用

   <!-- 调用全局组件 -->
          <!-- <my-header /> -->
          <my-header></my-header>

 

私有组件

• 只能在定义该组件的vue实例中使用
• 定义

​
 new Vue({
        el: "#app",
        // 定义私有组件
        components: {
            // 如果组件名称使用了驼峰命名, 那么在当前开发环境下, 调用的时候, 要使用-连接多个单词的方式
            MyHeader: {
                template: `
                    <div class="container">
                        <h1 @click="updateTitle">{{title}}</h1>
                    </div>
                `,
                data() {
                    return {
                        title: '自定义私有组件'
                    }
                },
                methods: {
                    updateTitle() {
                        this.title = 'hello component'
                    }
                },
                created() {
                    console.log(this.title);
                }
            }
        }
    });

​

• 调用: 当做自定义标签调用即可

•  <!-- 调用私有组件 -->
          <my-header />