Vue中组件模板抽离的写法

最新推荐文章于 2024-05-02 18:48:26 发布

新手小白请求出战！

最新推荐文章于 2024-05-02 18:48:26 发布

阅读量438

点赞数 1

分类专栏：前端笔记文章标签： javascript vue.js html5 es6

本文链接：https://blog.csdn.net/qq_41138726/article/details/109751313

版权

第一种分离写法

1.script标签，注意：类型必须是text/x-template

<body>
    <div id="app">
     <cpn></cpn>
     <cpn></cpn>
     <cpn></cpn>
    </div>

<!-- 第一种分离写法 -->
<!-- 1.script标签，注意：类型必须是text/x-template -->
<script type="text/x-template" id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈哈</p>
    </div>
</script>

    <script src="../vue.js"></script>

    <script>
       //    注册一个全局组件
     Vue.component('cpn',{
         template:'#cpn'
         
         
     })

        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊"
            }
        })
    </script>
</body>

第二种写法

2. t

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

新手小白请求出战！

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue中组件模板抽离的写法

第一种分离写法1.script标签，注意：类型必须是text/x-template<body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div><!-- 1.script标签，注意：类型必须是text/x-templat...
复制链接

扫一扫