vue中computed的作用以及用法

最新推荐文章于 2025-07-24 19:56:56 发布

weixin_33686714

最新推荐文章于 2025-07-24 19:56:56 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lanshu123/p/10956073.html

博客介绍了在Vue中，计算属性computed的主要作用。它能将数据存储到内存，减少不必要请求，还可用于给子组件的data赋值。

在vue中computed是计算属性，主要作用是把数据存储到内存中，减少不必要的请求，还可以利用computed给子组件的data赋值。

参考地址：https://www.jianshu.com/p/ff708a773dc0

// 父组件
<template>
    <div>
        <navbar :ctype="ctype"></navbar>
    </div>
</template>

<script>
import navbar from '@/components/navbar'
   export default {
       components: {navbar},
       data () {
           return{
               ctype:1
           }
       }
   }
</script>

// 子组件
<template>
    <div>
        <div>{{thistype}}</div>
    </div>
</template>

<script>
export default {
    props:['ctype'],
    computed: {
      normalizedSize: function () {
        return this.ctype.trim().toLowerCase()
      }
    },
    data(){
        return{
            thistype:this.ctype
        }
    }
}
</script>