码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-18 09:18:03      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:port   back   区分   就是   temp   lin   复用   ext   一个   

组件数据局部化处理

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

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

语法:

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>

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

标签:port   back   区分   就是   temp   lin   复用   ext   一个   

原文地址:https://www.cnblogs.com/cnhyk/p/12324750.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!