vue-将计数器作为组件封装

最新推荐文章于 2024-06-24 09:32:12 发布

非著名奶茶爱好者

最新推荐文章于 2024-06-24 09:32:12 发布

阅读量494

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46398446/article/details/111867452

版权

vue 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

组件可以访问Vue实例数据吗？

不能访问，因为组件是一个单独功能模块的封装，这个模块有属于自己的HTML模板，所以也应有自己的数据data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <cmp></cmp>
    <cmp></cmp>
    <cmp></cmp>
    <cmp></cmp>
</div>

<!--模板-->
<template id="cmp">
    <div>  <!--div别忘了-->
        <h2>当前计数：{{counter}}</h2>
        <button @click="increasing">+</button>
        <button @click="decreasing">-</button>
    </div>
</template>
<script>
    Vue.component('cmp',{
        template: '#cmp',
        data() {  /*为了使每一个对象单独分开*/
            return {
                counter: 0
            }
        },
        methods: {
            increasing() {  //后边不加function
                this.counter++
            },
            decreasing() {
                this.counter--
            }
        }
    })

    /*let(变量)const(常量)*/
    const app = new  Vue({
        el: '#app', //用于挂载要管理的元素
        data: {  //定义数据
            message: 'hello world',
        }
    })
</script>
</body>
</html>

注意

data() {  /*为了使每一个对象单独分开*/
            return {
                counter: 0
            }
        },

注意这种写法

非著名奶茶爱好者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-将计数器作为组件封装

组件可以访问Vue实例数据吗？不能访问，因为组件是一个单独功能模块的封装，这个模块有属于自己的HTML模板，所以也应有自己的数据data<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script></hea
复制链接

扫一扫

专栏目录