个人简介

Echo Blog


江湖无名 安心练剑
  • VUE3-21-处理边界情况
    处理边界情况 该页面假设你已经阅读过了组件基础。 如果你还对组件不太了解,推荐你先阅读它。 这里记录的都是和处理边界情况有关的功能,即一些需要对 Vue 的规则做一些小调整的特殊情况。 不过注意这些功能都是有劣势或危险的场景的。我们会在每个案例中注明,所以当你使用每个功能的时候请稍加留意。 控制更新 得益于其响应性系统,Vue 总是知道何时更新 (如果你使用正确的话)。 但是,...
    2021-08-02 13:01:55 | VUE
  • VUE3-20-模板引用
    模板引用 该页面假设你已经阅读过了组件基础。 如果你还对组件不太了解,推荐你先阅读它。 尽管存在 prop 和事件,但有时你可能仍然需要直接访问 JavaScript 中的子组件。 为此,可以使用 ref attribute 为子组件或 HTML 元素指定引用 ID。 例如: <input ref="input" /> 例如,你希望以编程的方式 focus 这个 ...
    2021-08-02 13:01:55 | VUE
  • VUE3-19-动态组件 & 异步组件
    在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is attribute 来切换不同的组件: <component :is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。 例如我们来展开说一说这个多标签界面: &l...
    2021-08-02 13:01:55 | VUE
  • VUE3-18-提供/注入
    提供 / 注入 该页面假设你已经阅读过了组件基础。 如果你还对组件不太了解,推荐你先阅读它。 通常,当我们需要将数据从父组件传递到子组件时,我们使用 props。 想象一下这样的结构:你有一些深嵌套的组件,而你只需要来自深嵌套子组件中父组件的某些内容。 在这种情况下,你仍然需要将 prop 传递到整个组件链中,这可能会很烦人。 对于这种情况,我们可以使用 provide 和 in...
    2021-08-02 13:01:55 | VUE
  • VUE3-17-插槽
    插槽内容 Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口。 它允许你像这样合成组件: <todo-button> Add todo </todo-button> 然后在 <todo-button> 的模板中,你可能有: &l...
    2021-08-02 13:01:55 | VUE
  • VUE3-16-自定义事件
    事件名 不同于组件和 prop,事件名不存在任何自动化的大小写转换。 而是触发的事件名需要完全匹配监听这个事件所用的名称。 举个例子,如果触发一个 camelCase 名字的事件: this.$emit('myEvent') 则监听这个名字的 kebab-case 版本是不会有任何效果的: <!-- 没有效果 --> <my-component @my-eve...
    2021-08-02 13:01:55 | VUE
  • VUE3-15-非 Prop 的 Attribute
    非 Prop 的 Attribute 一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 props 或 emits 定义的 attribute。 常见的示例包括 class、style 和 id 属性。 Attribute 继承 当组件返回单个根节点时,非 prop attribute 将自动添加到根节点的 attribute 中。 例如,在 <...
    2021-08-02 13:01:55 | VUE
  • VUE3-14-组件属性 Props
    Prop 类型 到这里,我们只看到了以字符串数组形式列出的 prop: props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 但是,通常你希望每个 prop 都有指定的值类型。 这时,你可以以对象形式列出 prop,这些 property 的名称和值分别是 prop 各自的名称和类型: props: { ...
    2021-08-02 13:01:55 | VUE