zoukankan      html  css  js  c++  java
  • 第六篇:组件数据局部化处理

    组件数据局部化处理

    同一个页面可能同时复用一个组件两次,但每个组件的数据不相同,需要区分开,因此我们需要对组件的数据局部化处理

    • 不管页面组件还是小组件,否可能被多次复用
    • 复用组件的原因,其实就是复用组件的 页面结构、页面样式、页面逻辑
    • 但是页面上的数据需要区分(被复用的两个组件数据多少是有区别的),所以组件的数据要做局部化处理
    • 借助函数可以产生局部作用域的特点,为每一次复用组件产生一个独立的作用域

    语法:

    data () {
        return {
            // 数据们
        }
    }
    

    子组件代码示例:

    <template>
        <div class="beat" @click="count += 1">
            {{ count }}下
        </div>
    </template>
     
    <script>
        export default {
            name: "Beat",
            // 不管是页面组件还是小组件,都可能被复用,页面结构与样式都可以采用一套,但是数据一定要相互独立
            data () {
                return {
                    count: 0
                }
            }
        }
    </script>
     
    <style scoped>
        .beat {
             100px;
            height: 100px;
            background-color: orange;
            text-align: center;
            line-height: 100px;
            border-radius: 50%;
        }
    </style>
    

    父组件代码示例:

    <template>
        <div class="home">
            <Beat/>
            <Beat/>
        </div>
    </template>
    <script>
        import Beat from '@/components/Beat'
        export default {
            components: {
                Beat,
            }
        }
    </script>
    
  • 相关阅读:
    webgl glsl
    javascript 分号理解
    流的理解 1
    javascript 排序
    phaser3 微信小游戏若干问题
    layabox 3d 入手
    phaser2 微信小游戏入手
    取整你知道几中办法?
    script 执行的三种方式
    cl查看类的内存布局
  • 原文地址:https://www.cnblogs.com/cnhyk/p/12324750.html
Copyright © 2011-2022 走看看