vue组件引用文件作为模板 Vue 3.0 模板引用

2023-02-26 16:17 VUE3教程

vue组件引用文件作为模板

Vue组件引用文件作为模板是一种常见的开发模式，它可以让我们在不同的项目中复用代码，提高开发效率。

Vue组件引用文件作为模板的基本步骤如下：

1. 创建一个新的Vue实例，并添加一个template选项；
2. 在template选项中使用require()函数来加载要使用的模板文件；
3. 在Vue实例中使用data选项来定义要传入模板的数据；
4. 使用render函数将data和template结合起来生成最终的HTML内容。

Vue组件引用文件作为模板还有一些其他优势。例如，我们可以在不同的项目中复用代码，而不必重复创建相同的HTML内容。此外，我们还可以在不同的项目中使用相同的CSS样式表，而无需重复书写样式代码。

总之，Vue组件引用文件作为模板是一种很好的方法，能够帮助我们在不同的项目中复用代码、减少重复工作、提升工作效率。

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

尽管存在 prop 和事件，但有时你可能仍然需要直接访问 JavaScript 中的子组件。为此，可以使用 ref attribute 为子组件或 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()

当 ref 与 v-for 一起使用时，你得到的 ref 将是一个数组，其中包含镜像数据源的子组件。

WARNING

$refs 只会在组件渲染完成之后生效。这仅作为一个用于直接操作子元素的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

参考：在组合式 API 中使用 template refs

阅读全文

文章详情

vue组件引用文件作为模板 Vue 3.0 模板引用