属性

自定义属性props
Prop 可以在组件上注册一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。在写通用组件时，props 最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值。

// 父组件
 <props name='属性'
        :type='type'
        :title="title"
        :list="list"
        :content="content"
  </props>
//子组件
props: {

    name: String,
    type: {
//从父级传入的 type，它的值必须是指定的 'success', 'warning', 'danger'中的一个，如果传入这三个以外的值，都会抛出一条警告
      validator: (value) => {
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    list: {
      type: Array,      
      // 对象或数组默认值必须从一个工厂函数获取      
    default: () => []
    }
  },
title: {
  type: String,
  default: 'test'
}

data和props的区别
相同点：都可以存放各种类型的数据，并且所有行为操作和模板渲染的数据都会同步发生变化
不同点：
在各自实例中，在任何情况下，我们都可以随意改变data的数据类型和数据结构，不会被任何环境所影响。
在各自实例中，一旦在初始化被定义好类型时，在数据传递时不能改变props的数据类型，而且不允许在子组件中直接操作传递过来的props数据，而是需要通过别的手段，改变传递源中的数据。

事件

数据驱动
Vue的一个核心思想是数据驱动，指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据即MVVM模式
用户执行某个操作 -> 反馈到 VM 处理（可以导致 Model 变动） -> VM 层改变，通过绑定关系直接更新页面对应位置的数据

插槽

插槽就是Vue实现的一套内容分发的API，将<slot></slot>元素作为承载分发内容的出口。简单来说就是在子组件中预先留出一个位置，内容填什么由父组件来决定。
1）具名插槽：就是给插槽起一个具体的名字，而slot属性对应的内容都会和组件中name一一对应，不起名字就是默认插槽

<div id="app">
    <child-component>
        <template slot="cat">
            优雅、萌宠
        </template>
        <template slot="dog">
            忠实、蠢萌
        </template>
        <div>
            动物
            默认的插槽
        </div>
    </child-component>
</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>
            <h4>动物中有狗和猫</h4>
            <slot name="cat"></slot> 
            <slot name="dog"></slot>
            <slot></slot>
            </div>
    })
    let vm = new Vue({
        el:'#app',
        data:{
        }
    })
</script>

作用域插槽
简单来说就是子组件可以在slot标签上绑定属性值，而父组件可以拿到这些数据，如：

//子组件中
<slot :userName="li"></slot>
//父组件通过slot-scope绑定的对象拿到userName的值
<template>
    <section>
        <child>
            <template slot-scope="scope">
                <div>{{scope.userName}}</div>
            </template>
        </child>
    </section>
</template>