20200428 Vue 组件

作用：提高代码复用性
使用方法：

1、全局注册

Vue.component('tag', { template: '<div>这是一个组件</div>' })

第一个参数是组件的名称，第二个参数是一个对象，是组件的模板

全局注册的优点：所有的vue实例都可以使用
全局注册的缺点：跟全局变量一样，权限太大，容错率降低

2、局部注册

        let app = new Vue({
            el: '#app',
            data: { },
            components: {
                'my-component': {
                    template: "<h1>组件组件组件</h1>"
                }
            }
        })

3、html标签受限，使用 is 属性

vue 组件的模板在某些情况下会受到html标签的限制，比如 <table>标签中只能有 <tr> <td> <tbody> 这些元素，所以直接在 table中使用组件是无效，会被自动提取到table 外面，此时就可以使用 is属性 来挂载组件。
例如：

        <table>
            <my-component></my-component>
        </table>
这样写是无效的，这个组件会被提取到 table 标签外面

1.png

此时就可以使用 is 属性来挂载组件：
        <table>
            <tbody is="my-component"></tbody>
        </table>

2.png

4、使用组件时的注意事项

• 使用 小写字母或小写字母加横线（-） 的形式命名组件
  例：

            components: {
                'my-component': {
                    template: "<h1>组件组件组件</h1>"
                },
            }

• template 中的内容必须被一个 DOM元素包括
• template 中也有 data、methods、computed
• template 中的 data 必须是一个方法

            components: {
                'my-component': {
                    template: "<h1>组件组件组件</h1>"
                },
                'btn-component': {
                    template: '<button @click="count++">{{count}}</button>',
                    data() {
                        return {
                            count: 0
                        }
                    }
                }

5、使用 props 实现父组件向子组件传递数据

• 在组件中使用 props 来从父组件中接收参数，在 props 中定义的属性，都可以在组件中直接使用。
• props 中的数据来自父级，而组件中 data return 的数据就是组件自己的数据，两种情况的作用域就是组件本身，可以在 template、computed 、methods 中直接使用。
• props 的值有两种，一种是字符串数组，一种是对象
• 可以使用 v-bind 来动态绑定父组件传递过来的内容
• 子组件中，props 中的值可以直接使用 this.xxx 来获取