本文實(shí)例講述了VUE 自定義組件模板的方法。分享給大家供大家參考，具體如下：

藤縣網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司2013年開(kāi)創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

先說(shuō)下需求吧，因?yàn)榭蛻舻挠脩羧罕容^大，如果需求變動(dòng)，頻繁更新版本就需要重新開(kāi)發(fā)和重新發(fā)布，影響用戶的體驗(yàn)，考慮到這一層就想到，頁(yè)面展示效果做動(dòng)態(tài)可配，需求更新時(shí)，重新配置一份模板錄入到數(shù)據(jù)庫(kù)，然后根據(jù)用戶選擇的模板進(jìn)行展示。

關(guān)于頁(yè)面展示做的動(dòng)態(tài)可配，我是參考vue的Component組件方式，開(kāi)始時(shí)可能會(huì)遇到組件定義后不能加載的情況，并在控制臺(tái)如下錯(cuò)誤：You are using the runtime-only build of Vue where the template compiler is not available.......解決辦法，如下圖文件中添加 'vue$': 'vue/dist/vue.esm.js', 即可，具體原因自行百度吧。

開(kāi)始上代碼：

1.最初版本的代碼,這個(gè)是剛開(kāi)始的時(shí)候測(cè)試一些想法

<template>
  <div >
   <ai-panel :testData="testData"></ai-panel>
  </div>
</template>
<script>
export default {
 data(){
    return {
     testData:{name:"李四"}
    }
  }
  ,components: { // 自定義組件
   aiPanel: {
    name: 'aiPanel',
    template: '<span>{{testData.name}}</span>',
    props: ['testData']//用作接收父級(jí)組件傳遞的參數(shù) :testData="testData" 即可
    //這里還可以繼續(xù)定義 子組件的 data,methods等
   }
  }
}
</script>

網(wǎng)站標(biāo)題：VUE自定義組件模板的方法詳解-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://www.chinadenli.net/article38/decgpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、網(wǎng)站收錄、服務(wù)器托管、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)