Vue中组件相关知识点

一、组件知识点
1.定义
何为组件，简单来说，组件就是一组HTML标签的集合，有点类似于模块，不过模块是基于不同的业务逻辑来划分的，而组件则是基于页面不同区域来划分的。组件中允许有多个标签，但只允许一个根标签。组件的产生同样也增强了代码的复用性。
2.创建方式
创建组件实例可以有多种方式，这里主要讲解其中的两种方式，同时也对应两类组件。第一类是全局组件，全局组件可以为所有的Vue实例调用，但条件是组件必须在实例前面，其创建方式如下：

<script>
     var tem = {
          data() {
              return {
              
              }
          },
          template: '<h1>124234</h1>',
          methods: {
          
          },
          . . . {
          
          }
     }
     Vue.component('mytem', tem)
</script>

其中tem为组件模板，需要通过component来注册为组件然后才可以使用。其实一个组件也相当于一个Vue实例，组件中也可以初始数据data、方法methods等，需要注意的是初始data时，需要使用return返回。另一类是局部组件，局部组件只能由特定实例来调用，其由Vue实例中components来创建，创建方式如下：

<script>
      var tem = {
            data() {
                 return {
                      
                 },
                 methods: {
                 
                 },
                 . . . {
                 
                 }
            }
      }
     var vm = new Vue({
            el: ' ', 
            data: {
                 
            },
            methods: {
            
            },
            components: {
                 'mytem': tem
            },
            
     });
 </script>

局部组件模板既可以在实例外部也可以在实例内部创建，而注册组件则须在实例内部进行。因此，全局组件和局部组件不同点在于组件注册方式的不同。
3.父子组件传值
在一个组件中如果存在另一个组件，则形成了组件之间的父子关系。当两者需要数据交互时，其访问方式存在不同。默认情况下，子组件是无法访问到父组件中的data和methods，当子组件需要访问父组件data时，可以通过v-bind指令进行属性绑定，子组件访问到的数据存储在props中，props类似于data，但它是只可读的，而且其中所有的数据都是来源于父组件，而子组件的data是可读可写的，是子组件私有的。当父组件需要访问子组件数据时，可以通过this.$emit(‘方法名’, 子组件数据)方式，子组件调用父组件方法，同时把数据传递给父组件，方法名为子组件内部自定义，通过v-on指令绑定父组件函数实现调用。