06-组件中数据存放问题

林笙10

于 2021-05-12 21:35:16 发布

阅读量80

点赞数

分类专栏： # 10-组件化开发文章标签： vue html js

本文链接：https://blog.youkuaiyun.com/weixin_46498227/article/details/116722131

版权

10-组件化开发专栏收录该内容

10 篇文章

订阅专栏

06-组件中数据存放问题

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>组件模板的分离写法</title>
</head>

<body>
    <div id="app">
        <cnp1></cnp1>
    </div>
    <!-- 方法一 -->
    <!-- <script type="text-x/template" id="cnp">
          <div>
              <h2>我是标题</h2>
              <p>我是内容呵呵</p>
          </div>

       </script> -->

    <!-- 方法二 -->
    <template id="cnp">
        <div>
            <h2>{{title}}</h2>
            <p>我是内容呵呵</p>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        //    注册组件
        // Vue.component('cnp1',{
        //     template:`
        //     <div>
        //         <h2>我是标题</h2>
        //         <p>我是内容哈哈</p>
        //     </div>
        //     `
        // })

        // 抽离写法
        Vue.component('cnp1',
            {
                template: '#cnp',
                data:function(){
                    return {
                        title:"abc"
                    }
                }
            }

        )
        const app = new Vue({
            el: '#app'
        })

    </script>

</body>

</html>