模板引用和边界处理

阅读: 2721 评论：0

尽管Vue设计了 prop 和事件机制用于父子组件通信，但有时你可能仍然需要直接访问子组件。

为此，首先需要使用 ref 属性为子组件或 HTML 元素指定引用 ID。例如：

<input ref="input" />

例如，你希望在组件挂载时，以编程的方式 focus 到这个 input 上，这可能有用

const app = Vue.createApp({})

app.component('base-input', {
  template: `
    <input ref="input" />
  `,
  methods: {
    focusInput() {
      this.$refs.input.focus()
    }
  },
  mounted() {
    this.focusInput()
  }
})

此外，还可以向组件本身添加另一个 ref，并使用它从父组件触发 focusInput 事件：

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput.focusInput()

$refs 只会在组件渲染完成之后生效。这仅作为一个用于直接操作子元素的应急手段。

我们应该尽量不在模板或计算属性中访问 $refs。

处理边界情况

所谓的边界情况即一些需要对 Vue 的规则做一些小调整的特殊情况。

边界情况的处理过程都是有缺点或危险的。

控制更新

得益于响应性系统，Vue 总是知道何时应该更新数据。

但是，在某些边缘情况下，比如没有任何响应式数据发生更改，但你却希望强制立刻更新。还有一些情况正好相反，比如你可能希望防止不必要的更新。

强制更新

如果你发现自己需要在 Vue 中强制更新，在 99.99%的情况下，你应该是写了个bug。

但是，在万分之一的情况下，必须手动强制更新，那么你可以使用 $forceUpdate。

低级静态组件与 `v-once`

在 Vue 中渲染纯 HTML 元素的速度非常快，但有时你可能有一个包含很多静态内容的组件。在这些情况下，可以通过向根元素添加 v-once 指令来确保只对其渲染一次，然后进行缓存，如下所示：

app.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

再次提醒，不要过度使用这种模式。虽然在需要渲染大量静态内容的极少数情况下使用这种模式会很方便，但除非你注意到先前的渲染速度很慢，否则就没有必要这样做。

动态和异步组件 CSS过渡

评论总数： 0

点击登录后方可评论