【Vue3】template模板

Vue3

 發表於 2024-12-25  |  2 分鐘  |  274 個字

【Vue3】template模板

Vue3

 發表於 2024-12-25  |  2 分鐘  |  274 個字

元件模板建立

1
2
3

<div id="app">
  <alert></alert>
</div>


1
2
3
4
5
6
7

const app = Vue.createApp({})

app.component('alert',{
  template:`<div class="alert alert-primary">元件模板</div>`
})

app.mount("#app");

元件模板＋v-for

1
2
3

<div id="app">
  <alert v-for="item in ArrayData"></alert>
</div>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const app = Vue.createApp({
  data(){
    return{
      ArrayData:[1,2,3]
    }
  }
})

app.component('alert',{
  template:`<div class="alert alert-primary">元件模板</div>`
})

app.mount("#app");

因為沒有任何傳值動作，此v-for僅會複製三次

x-template 以腳本方式引入模板

1
2
3
4
5
6
7

<script type="text/x-template" id="alert-template">
  <div class="alert alert-primary">x-template所建立的模板</div>
</script>

<div id="app">
  <alert></alert>
</div>


1
2
3
4
5
6
7

const app = Vue.createApp({})

app.component('alert',{
  template: "#alert-template"
})

app.mount("#app");

v-is載入模板

1
2
3

<div id="app">
  <div v-is="'alert1'"></div>
</div>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const app = Vue.createApp({})

app.component('alert1',{
  template:`<div class="alert alert-primary">元件模板1</div>`
})

app.component('alert2',{
  template:`<div class="alert alert-warning">元件模板2</div>`
})

app.mount("#app");

v-is載入模板＋動態切換

1
2
3
4

<div id="app">
  <input type="text" v-model="componentName">
  <div v-is="componentName"></div>
</div>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

const app = Vue.createApp({
  data(){
    return{
      componentName: "alert1"
    }
  }
})

app.component('alert1',{
  template:`<div class="alert alert-primary">元件模板1</div>`
})

app.component('alert2',{
  template:`<div class="alert alert-warning">元件模板2</div>`
})

app.mount("#app");

v-is裡面讀的是字串

v-is＋table

使用情境：在html結構下裡只接受，因此會跑版

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<div id="app">
  <table>
    <thead>
      <tr>
        <td>標題</td>
        <td>內容</td>
      </tr>
    </thead>
    <tbody>
      <table-row></table-row>
    </tbody>
  </table>
</div>

解決辦法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<div id="app">
  <table>
    <thead>
      <tr>
        <td>標題</td>
        <td>內容</td>
      </tr>
    </thead>
    <tbody>
      <tr v-is="'table-row'"></tr>
    </tbody>
  </table>
</div>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const app = Vue.createApp({})

app.component('table-row',{
  template: `
    <tr>
      <td>$</td>
      <td>這是一段文字</td>
    </tr>
  `
})

app.mount("#app");

Vue3 

其他相關