简单的复习和深入vue文档,发现了很多小知识,这次记下来分享给大家。
知识点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.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.1$root 和 $parent
$root可以帮助你在子组件调用
所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。
但不建议,还是使用vuex合适
p a r e n t 和 parent和 parent和root相似,但他是访问父组件实例的方法等。
3.2$ref
$refs 只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
3.3provide 和 inject(依赖注入)
这两个相较与 r o o t 和 root和 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()
})
}
}