Vue 3.0 選項(xiàng) DOM

#template

• 類型：string

• 詳細(xì)：

一個(gè)字符串模板作為 component 實(shí)例的標(biāo)識(shí)使用。模板將會(huì)替換掛載的元素。掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā)插槽。

如果值以 # 開始，則它將被用作 querySelector，并使用匹配元素的 innerHTML 作為模板。常用的技巧是用 <script type="x-template"> 包含模板。

注意

出于安全考慮，你應(yīng)該只使用你信任的 Vue 模板。避免使用其他人生成的內(nèi)容作為你的模板。

注意

如果 Vue 選項(xiàng)中包含渲染函數(shù)，該模板將被忽略。

• 參考

• 生命周期圖示

• 通過(guò)插槽分發(fā)內(nèi)容

#render

• 類型：Function

• 詳細(xì)：

字符串模板的另一種選擇，允許你充分利用 JavaScript 的編程功能。

• 用法：

  <div id="app" class="demo">
    <my-title blog-title="A Perfect Vue"></my-title>
  </div>

  const app = Vue.createApp({})
  
  app.component('my-title', {
    render() {
      return Vue.h(
        'h1',           // 標(biāo)簽名稱
        this.blogTitle  // 標(biāo)簽內(nèi)容
      )
    },
    props: {
      blogTitle: {
        type: String,
        required: true
      }
    }
  })
  
  app.mount('#app')

注意

render 函數(shù)的優(yōu)先級(jí)高于從掛載元素 template 選項(xiàng)或內(nèi)置 DOM 提取出的 HTML 模板編譯渲染函數(shù)。

• 參考 Render Functions