全局组件vue

惜瑶

于 2019-04-24 08:33:12 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_36598412/article/details/89485396

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在Vue中创建并使用全局组件，通过实例演示了数据与方法的绑定及更新过程，展示了如何通过@click事件触发计数器递增。

//全局组件
<div id="app">
        <counter></counter>
    </div>
    <template id="btn">
        <div>
            <button @click="arr">点击{{count}}</button>
        </div>
    </template>
    <script>
        Vue.component('counter',{
            template:'#btn',
            data() {
                return {
                    count:0,
                }
            },
            methods: {
                arr(){
                    this.count++;
                }
            },
        })
        new Vue({
            el:'#app',
        })
    </script>//打印结果为一个按钮依次递增
    主要点：el为放置html中声明的属性，component为全局组件，template为组件模板，data可储存html中的数据是为方法，methods为方法