vue文档深入---组件

简单的复习和深入vue文档，发现了很多小知识，这次记下来分享给大家。

1.插槽

知识点1：具名插槽

<header>
    <slot name="header"></slot>
  </header>
  <base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
</base-layout>

知识点2：作用域插槽
就是在组件内的作用域 传递给父组件。

知识点3:关于作用域的问题
作为一条规则，请记住：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

当你想在一个插槽中使用数据时，例如：

<navigation-link url="/profile">
  Logged in as {{ user.name }}
</navigation-link>
该插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”)，而不能访问 <navigation-link> 的作用域。例如 url 是访问不到的：

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  <!--
  这里的 `url` 会是 undefined，因为其 (指该插槽的) 内容是
  _传递给_ <navigation-link> 的而不是
  在 <navigation-link> 组件*内部*定义的。
  -->
</navigation-link>

具体可以查看：https://cn.vuejs.org/v2/guide/components-slots.html

2.动态组件 & 异步组件

2.1动态组件
动态组件就是动态的数据，如果不加keep-alive，组件每次都会重新加载。
2.2异步组件
其实就是我们常用的懒加载路由，路由本身就是一个vue组件。

new Vue({
	  // ...
	  components: {
	    'my-component': () => import('./my-async-component')
	  }
	})

用import的方式 返回一个 promise函数，当加载此组件时才开始进行渲染。

这里的异步组件工厂函数也可以返回一个如下格式的对象：

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

3.处理边界情况

3.1$root 和 $parent
$root可以帮助你在子组件调用
所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。
但不建议，还是使用vuex合适
$parent和$root相似，但他是访问父组件实例的方法等。

3.2$ref
$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

3.3provide 和 inject(依赖注入)
这两个相较与$root和$parent来说，更好用和更规范一些，她不像$parent,在使用parent时父组件需要渲染好后才可以用，容易造成父组件还未好你就调用，导致undefined。
但provide就不会，他就是类似是把父组件方法暴露传递给后代组件，inject来接收。

实际上，你可以把依赖注入看作一部分“大范围有效的 prop”，除了：

祖先组件不需要知道哪些后代组件使用它提供的 property
后代组件不需要知道被注入的 property 来自哪里

3.4程序化的事件侦听器
这一个算是对我来说有很大收获，对于更规范更具有可读性的代码构建，这个很有帮助。
通过 $on(eventName, eventHandler) 侦听一个事件
通过 $once(eventName, eventHandler) 一次性侦听一个事件
通过 $off(eventName, eventHandler) 停止侦听一个事件

// 一次性将这个日期选择器附加到一个输入框上
// 它会被挂载到 DOM 上。
mounted: function () {
  // Pikaday 是一个第三方日期选择器的库
  this.picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })
},
// 在组件被销毁之前，
// 也销毁这个日期选择器。
beforeDestroy: function () {
  this.picker.destroy()
}

上面的代码是我们正常开发时会遇到的，在mounted创建一个对象，在页面离开销毁他，但这里有个问题，这一个对象，我们在两个地方操作了他，也就是在mounted创建，beforeDestroy销毁。这看起来很正常，但如果写了很多个如此的对象，就会导致他们融合在了一块。
那么vue文档提供了一种方式。

mounted: function () {
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })

  this.$once('hook:beforeDestroy', function () {
    picker.destroy()
  })
}

通过监听事件，将创建和销毁 写在了一起，那么这个对象就独立在一块了。对于开发来说，非常舒服直观。

使用了这个策略，我甚至可以让多个输入框元素同时使用不同的 Pikaday，每个新的实例都程序化地在后期清理它自己：

mounted: function () {
  this.attachDatepicker('startDateInput')
  this.attachDatepicker('endDateInput')
},
methods: {
  attachDatepicker: function (refName) {
    var picker = new Pikaday({
      field: this.$refs[refName],
      format: 'YYYY-MM-DD'
    })

    this.$once('hook:beforeDestroy', function () {
      picker.destroy()
    })
  }
}