vue中自定义组件

    当某些html代码是重复使用时，就可以将其写成组件，直接调用，方便以后的修改。
    需要注意的是：定义的组件只能在注册过的代码块中使用，且定义组件的Vue.component是
    和注册代码是同级的。
    其形式为：
    Vue.component("组件名", {
        template: "定义的html代码",
        data: function () {
            return {
                返回的对象
            }
        }
    })
    注意：data后面必须是函数，且要返回一个对象，在引用组件的形式：“<组件名></组件名>”
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue自定义组件</title>
</head>

<body>
    <div id="app">
        <button-count></button-count>
    </div>
    <script>
        Vue.component("button-count", {
            template: "<button @click='count +=1'>您点击了{{count}}次</button>",
            data: function () {
                return {
                    count: 0
                }
            }
        })
        new Vue({
            el:"#app",
        })
    </script>
</body>

</html>

 

posted @ 2020-02-20 18:04  xsan  阅读(637)  评论(0)  编辑  收藏  举报