ggggxc学习笔记----Vue学习笔记V----组件

八、组件机制

 1.概述

       组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码，内部封装了可复用的HTML、CSS、JS代码片段。在较高层面上，组件是自定义元素，Vue的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。组件注册的时候需要为该组件指定各种参数。组件类似于vue实例，组件内部有template属性，用于指定模板，vue实例内部有el属性，用于指定模板。

  2.组件定义

组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

let component = {
      data() {
        return {
          // 返回对象值的唯一拷贝，保证复用的组件内部数据不会相互影响
          msg: '我是组件的数据'
        }
      },
      template: `
        

          
我是组件
          
{{msg}}
        
      `
}

注意：一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

  3.组件注册：要想进行组件使用得先进行组件注册

    1）全局注册 ：全局注册的组件，可以在任意vue实例或者组件内部使用。类似于js中的全局变量。可以使用Vue.component(tagName, options) 注册一个全局组件, 注册之后可以用在任何新创建的 Vue 根实例的模板中。

Vue.component('my-com', component);

      如果一个组件被多个其他组件调用，用全局注册较好。

    2）局部注册：只能在当前注册的实例或者组件内部使用，类似于js中的局部变量。

new Vue({
        el: '#app',
        data: {},
        components: {
          'my-com': component
        } 
})

     如果一个组件在一个实例或者组件内部被多次调用，用局部注册较好。 

 4.组件交互

介绍：在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

    1）父组件向子组件传参

      父组件使用prop属性，向子组件传参    

  
"
        
  

      动态传参：prop 可以通过v-bind动态赋值。传递什么类型的变量就可以将该类型变量直接进行赋值，也可以赋常量。如果不使用v-bind就只能传递字符串。

    1. 传入一个数字

    2. 传入一个布尔值

    3. 传入数组

    4. 传入一个对象

      子组件接受参数例子：

 let component = {
        props: ['title','msg'],
      }
      props校验：
      let component = {
        props: {	
         // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
          title: {
            type: String,     // 验证数据类型
            required: true,   // 该参数必需传递的参数
            // 基本数据类型直接写在default后面
            default: '你好',  //  当前参数的默认值
            // 引用数据类型,使用工厂函数的形式返回一个对象或者数组
            default() {
              return { message: 'hello'}
            }
// 自定义验证函数 
            validator(val) {  // 自定义的验证器
              return ['success', 'warning', 'danger'].indexOf(value) !== -1 }
            }
          }
        },
  }

    2）子组件向父组件传参

 
"
        
 

      let component = {
        data() {
          return {
            comMsg: '我是子组件数据'
          }
        },
        template:`
          

            发送事件
          
        `,
        methods: {
          clickHandler() {
            this.$emit('son-handler', this.comMsg)
          }
        }
      }

      new Vue({
        el:'#app',
        data: {
          fatherDate: ''
        },
        methods: {
          fatherHandler(val) {
            // val就是子组件发送事件时，携带的参数this.comMsg
            this.fatherDate = val
          }
        },
        components: {
          myCom: component
        }
      })

    3）单向数据流

      父级的prop数据的更新，会向下流动到子组件中，但是反过来不行。

      父组件能够修改子组件中的数据，而子组件不能直接修改父组件中的数据

      作用：防止子组件意外变更状态，会影响父组件中的状态或者数据。

    4）自定义事件是子组件向父组件传递状态的一种机制。

      事件名大小写严格区分。

  5.插槽

    1）普通插槽：插槽允许我们在调用子组件的时候为子组件传递模板。

 hello vue

      let com = {
        template: `
          

              // 默认插槽
          
        `
      }

子组件

default

父组件

Your Profile

注意：当组件渲染的时候， 将会被替换为“Your Profile”。插槽内可以包含任何模板代码，甚至是其他组件。如果从函数的角度来理解，slot为形式参数，而navigation-link中的内容就为实参。Slot标签内部的内容为默认值，也就是当调用navigation-link组件的时候没有设置插槽内容，则组件插槽内容默认为default。

    2）具名插槽：在一个组件中有多个插槽，调用的时候为了给不同的组件传递参数就需要为插槽进行命名

 
        
        
        


      let com = {
        template: `
          

            

                // 具名插槽
            
            

               // 匿名插槽
            
            

                // 具名插槽
            
          
        `
      }

    3）作用域插槽：在一个组件中有多个插槽，调用的时候为了给不同的组件传递参数就需要为插槽进行命名。

        
        
        
      

      let com = {
        data() {
          return {
            msg: '我是组件数据'
          }
        }
        template: `
          

            

                // 具名插槽
            
            

               // 匿名插槽
            
            

                // 具名插槽
            
          
        `
      }

缩写：与v-bind、v-on类似，v-slot也具有缩写形式，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如： v-slot:header 可以被重写为 #header

  6.动态组件

  // 静态组件

// 动态组件

注意：默认情况下，当组件在切换的时候都会重新创建组件，但是有些时候我们希望组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 元素将其动态组件包裹起来。