组件探索

组件命名两种格式

1. kebab-case
my-component-name

2. PascalCase
MyComponentName

Prop

Prop 命名格式

命名使用kebab-case (短横线分隔命名) 命名：

如果使用驼峰命名 postTitle ==》 post-title

Prop 类型约束

默认我们传递时是Prop 为字符串数组形式；为了更好的管理Prop，我们可以以对象的形式进行管理。

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}


Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

Prop 传递值

任何类型的值都可以传给一个 prop。

单向数据流

父级组件状态发生变化，子组件会随着父级组件变化为最新的状态。反过来不可以，子级组件发生变化，父级组件跟真变化，这样Vue会发出警告

禁用Attribute继承

默认可以给子组件传递任意的 Attribute ，然后子组件接收使用 Attribute。

但有时，我们想限制给子组件传递 Attribute，那么该怎么做呢？

首先，我们应确认子组件要接收哪些Props
然后，在子组件中定义这个属性， inheritAttrs: false, 则就禁止Attribute继承

这样做的目的是为了什么呢？

别人在接手开发时，他只能传递只定的Props，不能传递其它的Props

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

自定义事件使用

事件名

1.事件名不存在任何自动化的大小写转换。

2.触发的事件名需要完全匹配监听这个事件所用的名称。

Vue 官方推荐事件命名采用 kebab-case

this.$emit('to-A','参数')


<A    @to-A='父级的自定义事件'></A>

methods:{
    receiveSon:(e){
        接收传递过来的参数
        console.log(e)
    }
}

插槽

所谓插槽：就是在Vue中，子组件定义了 <slot></slot> ，它就相当于在父组件占据了位置，你可以往里面插入任何数据，可以定义多个slot。

slot 又分为：具名slot 默认slot 作用域slot

具名插槽

所谓具名插槽，就是插槽有自己的name，在子组件中定义好，可以在父组件中通过指定来渲染

格式：

使用:

先定义好插槽在子组件中
在父组件中引入组件，然后在子组件中插入即可
3

注意：

在使用具名插槽和作用域插槽时，Vue 官方已经废弃了 slot 和 slot-scope 的使用，可以使用 v-slot 指令

// 子组件

<template>
  <div>
    //具名插槽
    <slot name="head"></slot>
    <h1>Son 组件</h1>
    // 默认插槽
    <slot></slot> 
    <Button @click="toParent">子向父 传递值</Button>
    <slot name="foot"></slot>
  </div>
</template>




//父组件

<template>
    <div>
        <h1>Father  组件</h1>
        <hr>
        <Son  @receiveToParent="receiveToSon">
            <template v-slot>
                <h1>我是默认插槽</h1>
            </template>
            <template v-slot:head>
                <hr>
                <h1>我是具名插槽  head</h1>
                <hr>
            </template>
            <template v-slot:foot>
                <hr>
                <h1>我是具名插槽  foot</h1>
                <hr>
            </template>
        </Son>

    </div>
</template>

作用域插槽

有时，我们可能遇到这种需求：

在插槽内容中能够访问子组件数据，那么就用到作用域插槽。

简单的说：父组件在子组件中使用子组件提供的prop数据

如何使用呢？

1.通过在子组件 slot 中动态绑定数据 <slot :obj='obj'></slot>

在父组件中使用的方法两种

（1）v-slot:default = "son" 使用prop中数据 {{son.obj.name}}

（2）v-slot= "{obj}" 使用prop中数据 {{obj.name}}

优先采用第二种，这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。

注意

默认插槽的缩写语法不能和具名插槽混用会导致作用域不明确

出现多个插槽，可以要使用多个template

// 子组件
<template>
  <div>
    <slot :obj='obj'></slot>
    <slot :obj='games'></slot>
  </div>
</template>
<script>
export default {
  name: 'Son',
  data () {
    return {
      name: '测试',
      obj: {
        name: '张三',
        age: 22
      },
      games: {
        version: '版本：0.1',
        name: '王者农药'
      }
    }
  },

}
</script>




//父组件
<template>
    <div>
        <h1>Father  组件</h1>
        <hr>
        <Son  @receiveToParent="receiveToSon">
            // 通过v-slot:自定义 = “{}” 使用prop数据
            <template v-slot:default= "{obj}">
                {{obj.name}}
            </template>
             <templatev-slot:other= "{games}">
                {{games.name}}
            </template>
            <template v-slot:head>
                <hr>
                <h1>我是具名插槽  head</h1>
                <hr>
            </template>

        </Son>
    </div>
</template>

插槽简写

 <template #head>
                <hr>
                <h1>我是具名插槽  head</h1>
                <hr>
 </template>

动态组件

组件上使用 `keep-alive` 来达到缓存效果

可能你遇到这种需求，第一次点击了首页，然后点击个人主页，返回的时候，首页组件会被重新加载，浪费必要的性能问题，想解决此类为题，Vue中提供了在组件上动态绑定 keep-alive 来处理

需要在router中设置router的元信息meta

  {
    path: '/',
    name: 'Father',
    component: Father,
    meta: {
      keepAlive: true // 需要缓存
    }
  }

使用$route.meta的keepAlive属性进行判断

<el-col :span="24" class="content-wrapper">
  <transition name="fade" mode="out-in">
    //这里需要缓存，使用keep-alive标签包裹
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    //这里不需要缓存
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </transition>
</el-col>

父组件向子组件传递值通过在子组件身上动态绑定传值

三部曲：“
1. 先引入 子组件
2. 注册 子组件
3. 使用子组件 传值


例如：

    <template>
        <div>
            <h1>Father  组件</h1>
            <hr>
               // 这块动态传递了一个数组对象
            <Son :list = list  @receiveToParent="receiveToSon"></Son>
        </div>
    </template>
    <script>
    import Son from './Son'
    export default {
      name: 'Father',
      components: {
        Son
      },
      data () {
        return {
          list: [
            { title: '小张中彩票了', author: 'Mr.Liu' },
            { title: '房价跌倒谷底', author: 'Mr.Liu' },
            { title: '阿里云便宜了', author: 'Mr.Liu' }
          ]
        }
      },
      methods: {
        receiveToSon (e) {
          console.log(e)
        }
      }
    }
    </script>

子组件向父亲传递值 $emit

1. 子组件 通过this.$emit('事件名称'，传递参数)
2. 在父子组件中 通过 在子组件身上 @事件名称 = 自定义的事件  来接收参数

<template>
    <div>
        <h1>Son  组件</h1>
        <template>
            <ul>
                <li v-for="(item,index) of list" :key="index"> <h2>{{item.title}}</h2> <br><h3>{{item.author}}</h3></li>
            </ul>
        </template>
        <Button @click="toParent">子向父 传递值</Button>
    </div>
</template>
<script>
export default {
  name: 'Son',
  //  通过prop 来接收 父组件传递过来的数据
  props: ['list'],
  data () {
    return {
      name: '测试'
    }
  },
  methods: {
    toParent () {
    // 子组件 通过 this.$emit(事件名，要传递的参数)
      this.$emit('receiveToParent', this.name)
    }
  }
}
</script>