Vue 笔记(5)- 组件(子组件引用、递归组件、v-once、边界处理)

原创 乘风逐月 随笔 Vue 92阅读 23 天前 举报

一、编写可复用组件

对于需要复用的组件,应当定义一个清晰的公开接口,同时也不需要对其外层数据做出任何假设。
Vue 组件的 API 来自三部分 —— prop、事件、插槽:
a. Prop 允许外部环境传递数据给组件
b. 事件 允许从组件内部触发外部环境的副作用
c. 插槽 允许外部环境将额外的内容组合在组件中
使用 v-bind 和 v-on 的简洁语法,模板的意图会更清晰:

二、子组件引用

当需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件制定一个 ID。如:

当 ref 和 v-for 一起使用时,获取到的引用会是一个数组,包含和循环数据源对应的子组件。
$refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案,应当避免在模板或计算属性中使用 $refs。

三、异步组件

大型应用中,需要将应用拆分成多个小模块,按需从服务器下载。Vue 允许将组件定义为一个工厂函数,异步的解析组件的定义。Vue 只在渲染时触发工厂函数,并把结果缓存起来,用于后面的再次渲染。
如:

工厂函数接受一个 resolve 回调,在收到从服务器下载的组件定义时调用。也可以调用 reject(reason) 指示加载失败。

四、组件命名约定

当注册组件(或者prop)时,可以使用 kebab-case(短横线分隔命名),camelCase(驼峰式命名),PascalCase(首字母大写命名)。
在 HTML 模板中,camelCase 命名要改成 kebab-case 命名。
当使用字符串模式时,可以不受 HTML 大小写不敏感的限制。

五、递归组件

组件在它的模板内可以递归的调用自己。不过,只有当它有 name 选项时才可以这样做:

这样递归会导致死循环,所以递归是要确保递归调用有终止条件。如递归调用时使用 v-if 并最终解析为 false。

六、对低开销的静态组件使用 v-once

当组件中包含大量静态内容时,可以使用 v-once 将渲染结果缓存起来。

七、边界处理情况

1. 访问根实例

在每个 new Vue 实例的子组件中,其根实例可以通过 $root 属性进行访问。
例如:

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。

2. 访问父级组件实例

$parent 属性可以用来从一个子组件访问父组件的实例。它提供了一种机会,在后期可以随时触达父级组件,以代替将数据以 prop 的方法传入子组件的方式。

可以使用 this.$refs.usernameInput 来访问 base-input 实例。

3.依赖注入

在这个例子中,假如 google-map 的后代都需要访问一个 getMap。那使用 $parent 属性无法很好的扩展到更深层级的嵌套组件上。这需要依赖注入。
它用到了两个新的实例选项: provide 和 inject。
provide:允许指定想要提供给后代组件的数据/方法,例如:

然后在任何后代组件里,都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性, inject:['getMap']

4.程序化的事件侦听器

通过 $on(eventName, eventHandler) 侦听一个事件
通过 $once(eventName, eventHandler) 一次性侦听一个事件
通过 $off(eventName, eventHandler) 停止侦听一个事件

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复