第六篇：组件数据局部化处理

Posted 2021-03-09 cnhyk

组件数据局部化处理

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

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

语法：

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 {
        width: 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>