Vue笔记-组件Component-基本使用

Vue.js组件

• ​提高功能复用性与可维护性，更好的专注于业务逻辑
• ​组件使用时为自定义html标签形式，通过组件名作为自定义标签名

    <div id="app">
        <p>p标签</p>
        <!-- 组件 -->
        <my-com-a></my-com-a>
    </div>

1、组件注册

• 组件要能使用必须要先进行注册
• 组件的注册时候，可以采用PascalCase形式MyComA或者kebab-case形式my-com-a， 但是在视图中引用时,只能采用kebab-case ，因为浏览器在识别时会自动转为小写

    <div id="app">
        <my-com-a></my-com-a>
    </div>

1.1、全局注册

• 注册之后可以用于任意实例或者组件中
• ​注意：全局注册必须设置在根Vue实例创建之前

		// 全局注册
        Vue.component('MyComA', {选项配置})     

1.2、局部注册
注册在Vue实例内部（components选项）

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            components: {
                'myComA': {
                    template: `<div>局部注册组件</div>`
                }
            }
        })
    </script>

2、组件选项配置说明（组件的选项和vue实例的基本一致，有个别写法不同）
2.1、template选项

• ​ 用于设置组件的结构，最终被引入根实例或者其他组件中

​ 注意：有且只能设置一个根元素（全部内容被根元素包裹），内部可以使用模板{{ }}

        Vue.component('MyComA', {
            template: `
            <div>
                 <h1>template内容</h1>
            </div>`,
        })

2.2、data选项 存储组件的数据

• 与Vue实例的data属性写法不同

• 组件的data选项必须为函数，数据设置在返回值对象中

  说明：data选择以函数形式实现方式：是为了确保每个组件实例可以维护一份被返回对象的独立的拷贝，不会相互影响

        Vue.component('MyComA', {
            template: `
            <div>
                 <h1>{{ title }}</h1>
            </div>`,
            data() {
                return {
                    title: '组件data'
                }
            },
        })