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 组件&组件之间的通信之 template模板引用与动态组件的使用 vue路由与组件引用 vue组件，可以通过npm引用的组件 Vue单文件组件基础模板 [typescript + vue] $refs 引用组件的实例报错 vue引用组件的两个方法 Vue-组件模板抽离的写法在被vue组件引用的 js 文件里获取组件实例this uni-app、Vue组件的使用-引用子组件、传值 vue3 - 可复用 & 组合 - 组合式API - 模板引用