Vue组件化

组件化

组件本质就是html的扩展。使用组件要把它当成html一样使用

• 只有根组件才能使用el

• 组件化的意义：封装（复用、隐藏逻辑、提高可维护性）、快速开发（搭积木）

• 定义组件

  Vue.conponent('see-artice',{})//第一个参数组件名，组件名必须是两个以上的单词。并且用-链接。   第二个参数选项除了el不能用其他选项都可以使用
  
  //组件有一个必有的选项是template,这个选项用于指定当前的视图模板。
  //视图节点也必须是单一根节点
  //组件可以有自己独立的data选项，但是data不再是一个{}，而是一个工厂函数
  //props选项：props表示由于接收从父组件作用域传递过来的“自定义属性”，接收之后可以通过this访问，所以props数据在当前组件中可以用在指令中，其他的选项中都可以用。
  //父组件可以向子组件传递数据，子组件使用props来接收，可以传递基本数据类型。
  Vue.component('qf-button',{
     template:`
       <div>
            <span>{{100}}</span>
            <h5 v-text='mes'></v-tex>
            <span v-text='xxx'></span>
            
        </div>
      `,
      data:function(){
          return{
              //return 必须返回一个对象,这个对象就是我们声明式变量
              mes:'hhhh'
          }
         
      },
      props:{
          xxx:{ type : String , required:flase,default:''}
      
      }
      
      
  })
  

  • $emit(’自定义事件名‘，…将要回传给父组件的数据列表)：用于触发一个自定义事件，同时向父组件传递数据。

  • 组件化的核心是：1.自定义属性props 2.自定义事件 $emit() 3.自定义插槽

总结：

• props,是子组件的一个选项，用于接收父组件给我的自定义属性 =>v-bind
• $emit(),是一个vue api ,用于触发父组件给我的自定义事件 （向父组件发数据） v-on
• ,是vue的一个内置组件，可以直接使用， v-slot

注册组件

• 全局注册组件

• 局部注册组件

父子组件通信

• 父组件向子组件传递数据时，我们使用自定义属性，在子组件使用props接收即可
  • ​ 自定义属，在子组件中必须使用props接收，否则用不了
• 当子组件需要向父组件传递数据时，我们使用自定义事件，在子组件中使用$emit()触发并回传数据
  • ​ ”表单类“：但凡涉及到“父子组件通信”的组件，我们一般称之为“类表单”。v-model可以优化代码

插槽

是vue内置组件

当我们封装自定义组件时，从组件结构的角度来看，某些结构是不确定的，那我们使用占个位置。当这个组件被真正使用时，才能够确定这个位置放什么元素。这就叫插槽。

以后封装组件，哪个地方不确定，就放一个占位。如果有多个地方不确定，就放多个不同的。使用命名插槽，给

• 默认name 叫‘default’
• v-slot是一个指令，用于指定哪个来显示当前元素.他的简写为#
• 可以添加任意自定义属性，在父组件中使用 v-slot来获取数据