Vue组件三大核心概念

Vue的核心三大基础概念为：属性、时间和插槽。本文就这三个方面进行深入解析，来了解vue。

一、属性

1.自定义属性props

props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。

2.inheritAttrs

这是2.4.0 新增的一个API，默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。可通过设置 inheritAttrs 为 false，这些默认行为将会被去掉。注意：这个选项不影响 class 和 style 绑定。

data与props区别

※相同点：
data和props的选项里面都可以存放各种类型的数据，当行为操作改变时，所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。
※不同点：
data 被称之为动态数据，可以任意改变它的数据类型和数据结构，不会受到任何环境的影响。
props 被称之为静态数据，在各自实例中，一旦在初始化被定义好类型时，基于 Vue 是单向数据流，在数据传递时始终不能改变它的数据类型，而且不允许在子组件中直接操作传递过来的props数据，而是需要通过别的手段，改变传递源中的数据。

4.单向数据流

修改传递过来的props方法
☆方法1：过渡到data选项中==>在data选项里面通过currentType接收props中type数据，相当于一个赋值，不仅拿到了currentType的数据，而且可以改变currentType数据。

☆方法二：利用计算属性

以上两种方法虽可以在子组件间接修改props的值，但是却不能使子组件修改数据并且同步更新到父组件。所以需要对一个 prop 进行『双向绑定』。
☆方法三：使用.sync
但是.sync也是有限制的，比如：
1）不能和表达式一起使用（如 v-bind:title.sync="doc.title + ‘!’“是无效的）；
2）不能用在字面量对象上（如 v-bind.sync=”{ title: doc.title }"是无法正常工作的）。
☆ 方法4：将父组件中的数据包装成对象传递给子组件
在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

5.向子组件中传递数据时加和不加 v-bind的区别用法：

在没有 v-bind 的模式下只能传递一个字面量，这个字面量只限于 String 类量，字符串类型。那如果想通过字面量进行数据传递时，如果想传递非String类型，必须props名前要加上v-bind，内部通过实例寻找，如果实例方没有此属性和方法，则默认为对应的数据类型。

二、事件

1.事件驱动与数据驱动
用原生JavaScript事件驱动通常是这样的流程：

※先通过特定的选择器查找到需要操作的节点 -> 给节点添加相应的事件监听
※然后用户执行某事件（点击，输入，后退等等） -> 调用 JavaScript 来修改节点
这种事件驱动的方式效率很低，所以一般我们采用数据驱动。
Vue的一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据,其流程如下：

用户执行某个操作 -> 反馈到 VM 处理（可以导致 Model 变动） -> VM 层改变，通过绑定关系直接更新页面对应位置的数据
可以简单地理解为：数据驱动不是操作节点的，而是通过虚拟的抽象数据层来直接更新页面。
2.修饰符事件
☆表单修饰符

.lazy:在默认情况下， v-model 在每次 input 事件触发后将输入框的值与数据进行同步。可以通过添加 lazy 修饰符，从而转变为使用 change事件进行同步。适用于输入完所有内容后，光标离开才更新视图的场景。
.trim：自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。
.number：自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符（如果你先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加.number）
☆事件修饰符
阻止单击事件继续传播：
提交事件不再重载页面：
修饰符可以串联：

三、插槽

插槽分为普通插槽和作用域插槽，两者很相似，区别仅在于作用域插槽可以接受子组件传递过来的参数。
v-slot新语法：
在 2.6.0 中，为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 。