详解vue组件（属性、事件和插槽）

一、属性

1.自定义属性props

可以得出props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。通过一般属性实现父向子通信；通过函数属性实现子向父通信

2.inheritAttrs

3. data与props区别

• 相同点

两者选项里都可以存放各种类型的数据，当行为操作改变时，所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。

• 不同点

data 被称之为动态数据，在各自实例中，在任何情况下，我们都可以随意改变它的数据类型和数据结构，不会被任何环境所影响。

props 被称之为静态数据，在各自实例中，一旦在初始化被定义好类型时，基于 Vue 是单向数据流，在数据传递时始终不能改变它的数据类型，而且不允许在子组件中直接操作 传递过来的props数据，而是需要通过别的手段，改变传递源中的数据。

4.单向数据流

props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的，不允许直接操作改变各自实例中的props数据，而是需要通过别的手段，改变传递源中的数据

• 方法1：过渡到 data 选项中

在子组件的 data 中拷贝一份 prop，data 是可以修改的

export default {
  props: {
    type: String
  },
  data () {
    return {
      copyType: this.type
    }
  }
}

• 方法2：利用计算属性

export default {
  props: {
    type: String
  },
  computed: {
    copyType: function () {
      return this.type.toUpperCase();
    }
  }
}

以上两种方法虽可以在子组件间接修改props的值，但如果子组件想修改数据并且同步更新到父组件，却无济于事。在一些情况下，我们可能会需要对一个 prop 进行『双向绑定』，此时就推荐以下这两种方法：

• 方法3：使用.sync

父组件向子组件 props 里传递了 msg 和 show 两个值，都用了.sync 修饰符，进行双向绑定。
不过.sync 虽好，但也有限制，比如：

1）不能和表达式一起使用（如v-bind:title.sync="doc.title + '!'"是无效的）；
2）不能用在字面量对象上（如v-bind.sync="{ title: doc.title }"是无法正常工作的）。

• 方法4：将父组件中的数据包装成对象传递给子组件

这是因为在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。比如上例中在子组件中修改父组件传递过来的数组arr,从而改变父组件的状态。

5.向子组件中传递数据时加和不加 v-bind？

如果想传递非String类型，必须props名前要加上v-bind

二、事件

1.事件驱动与数据驱动

Vue的一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据

数据驱动不是操作节点的，而是通过虚拟的抽象数据层来直接更新页面。主要就是因为这一点，数据驱动框架才得以有较快的运行速度

2.修饰符事件

普通事件和修饰符事件

如果你的回答是<custom-component @click="xxx">，那就错了。这里的 @click 是自定义事件 click，并不是原生事件 click。绑定原生的 click 是这样的：

<custom-component @click.native="xxx">组件内容</custom-component>

• 表单修饰符

1).lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步。适用于输入完所有内容后，光标离开才更新视图的场景。

2).trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

这个修饰符可以过滤掉输入完密码不小心多敲了一下空格的场景。需要注意的是，它只能过滤首尾的空格！首尾，中间的是不会过滤的。

3).number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符:

<input v-model.number="value" type="text" />

• 事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

三、插槽

1.作用域插槽（子传父）

     v-slot:slotName（名字可写可不写，如果不写默认是default）="变量（这个变量是一个对象）"

    作用：让组件来提供自身需要显示的内容

2.v-slot新语法