vue 2 引用模板組件

本文轉載自查看原文 2019-12-06 15:47 256 vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用模板</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
        <my-hello></my-hello>
    </div>

    <template id="wbs">
        <!-- <template>必須有且只有一個根元素 -->
        <div>
            <h3>{{msg}}</h3>
            <ul>
                <li v-for="value in arr">{{value}}</li>
            </ul>
        </div>
    </template>

    <script>
        var vm=new Vue({
            el:'#itany',
            components:{
                'my-hello':{
                    name:'wbs17022',  //指定組件的名稱，默認為標簽名，可以不設置
                    template:'#wbs',
                    data(){
                        return {
                            msg:'歡迎來到南京網博',
                            arr:['tom','jack','mike']
                        }
                    }
                }
                
            }
        });    
    </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue-組件（引用模板） vue組件模板及組件間的引用 Vue 組件&組件之間的通信之 template模板引用與動態組件的使用 VUE組件循環引用 vue引用其他組件,css vue組件如何被其他項目引用 vue 全局組件的引用 Vue——組件封裝引用 vue組件如何被其他項目引用 vue組件之間的引用