Vue组件的通信

Prop

1. Prop 的大小写 (camelCase vs kebab-case)

• HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
• 如果使用字符串模板，那么这个限制就不存在了。

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

2. prop使用注意

• 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
• 每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
• 兄弟组件间也不能直接 props 通信，必须借助父组件才可以
• 在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

3. prop使用方式

• 指定名称

props: ['name', 'age', 'setName']

• 指定名称和类型

props: {
    name: String,
    age: Number,
    setNmae: Function
}

• 指定名称/类型/必要性/默认值

props: {
    name: {
        type: String, 
        required: true, 
        default:xxx
    },
}

4. mouseenter、mouseleave、mouseover和mouseout的区别？

• mouseover与mouseout成对，mouseenter与mouseleave成对
• mouseover触发优先级高于mouseenter，mouseout触发优先级高于mouseleave
• 在父元素上绑定mouseover和mouseout事件，子元素同样也会触发，即子元素mouseover和mouseout事件会冒泡至父元素；而父元素绑定mouseenter和mouseleave事件只对父元素有效，子元素不会触发，即mouseenter和mouseleave事件不会冒泡至父元素。
• 所以在实际应用时，推荐使用mouseenter和mouseleave事件，避免因为考虑不佳而产生错误的效果。当然也可以使用标准stopPropagation() 方法，或者IE浏览器上使用cancelBubble=true的方式阻止冒泡，从而达到和mouseenter和mouseleave的相同效果。

5. localStorage存储的使用

• 取值：window.localStorage.getItem(key)
• 存值：window.localStorage.setItem(key,value)

自定义事件

1. 父组件绑定事件监听

• 方式一：通过v-on绑定

<TodoHeader @addTodo="function"/>

<my-component v-on:my-event="function"></my-component>

• 方式二：通过$on绑定

<TodoHeader ref="header"/>

this.$refs.header.$on('function name',  this.function)

2. 子组件触发事件

// 触发事件(只能在父组件中接收)
this.$emit('function name', data)

3. 注意

• 此方式只用于子组件向父组件发送消息(数据)
• 隔代组件或兄弟组件间通信此种方式不合适

4. 绑定原生事件：<base-input v-on:focus.native="onFocus"></base-input>

5. .sync修饰符

• 在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。推荐以 update:myPropName 的模式触发事件取而代之。
• 带有.sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

替换为

<text-document v-bind:title.sync="doc.title"></text-document>

PubSubJS 库

1. 安装PubSubJS

• 使用npm安装：npm install pubsub-js
• 使用yarn安装：yarn add pubsub-js

2. 消息订阅

import PubSub from 'pubsub-js'

mounted () {
   // 订阅消息(deleteTodo)
   PubSub.subscribe('deleteTodo', (msg, index) => {
      this.deleteTodo(index)
   })
},

3. 消息发布

import PubSub from 'pubsub-js'

deleteItem () {
   // 发布消息(deleteTodo)
   PubSub.publish('deleteTodo', this.index)
}

4. 此方式可实现任意关系组件间通信(数据)，不局限于父子组件。

插槽Slot

1. Slot的意义是“占坑”，在组件模板中占好了位置

• 当使用组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置）
• 例如当插槽也就是坑<slot name= ” mySlot ” >有命名时，父组件标签中使用属性slot="mySlot"的元素就会替换该对应位置内容
• 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

2. 此方式用于父组件向子组件传递标签数据。

3. 父组件

<TodoFooter>
	<input type="checkbox" v-model="checkAll" slot="checkAll"/>
    <span slot="size">已完成{{completeSize}} / 全部{{todos.length}}</span>
    <button class="btn btn-danger" v-show="completeSize"
 	    @click="deleteAllCompleted" slot="delete">清除已完成任务</button>
</TodoFooter>

4. 子组件

<div class="todo-footer">
    <label>
	    <slot name="checkAll"></slot>
    </label>
    <span>
    	<slot name="size"></slot>
    </span>
    // 将checked的值传递给父组件
	<slot name="delete" :checked="checked"></slot>
</div>

5. 在 2.6.0 中，为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。

• 它取代了 slot 和 slot-scope
• v-slot只能添加在 <template> 上 ，有一种例外

<!-- 当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用-->
<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

<!-- 简写省略default-->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

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

<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</current-user>

• 只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>

6. 数组的map()方法

• 作用：重新创建返回新数组。
• 注意：map操作时不能改变原数组，否则再次触发map方法陷入死循环。
• 示例：

this.users = this.items.map(item => ({
    url: item.html_url,
    avatarUrl: item.avatar_url,
    username: item.login
}))