Vue watch 监听 computed

2021-09-17 16:34:09 阅读：237 来源： 互联网

标签：Vue 总价 computed watch 模板计算 emit 表达式

computed 的英文意思是计算，那么顾名思义，vue中的computed也与计算有关，他是专门用来处理复杂表达式的，在vue中，不建议在模板语法中写复杂的表达式，如：x+y+(z-1) 这种，所以vue建了一个computed用来处理这类表达式，使用方法其实也不难，在computed里面建一个函数并写表达式，然后在想要引用的地方将之当成data里的值引用即可，例如想要在模板语法里面用，只需要写函数名即可，并且不用加括号，具体例子如下：

data中定义三个值：

data(){
    return{
        num1: 10,
        num2: 20,
        nums: 5
    }
},

然后在computed中写一条表达式：

computed:{ //计算函数，复杂的计算都应该放在这里，尽量不要直接在模板语法里面计算，在此处计算的值是会动态变的，即计算的数中有一个值变了，最终结果也会跟着变，类似于封装的计算函数
    addNum:function(){ //addnum可以直接在模板语法里面用，相当于data内的值
        return Number(this.nums) + Number(this.num1) + Number(this.num2);
    }
},

之后在模板语法中应用

<div>{{addNum}}</div> //addNum即为定义的表达式

在工作中写了一个购物车，当用户点击商品数量按钮（增加或者减少）的时候，就会自动计算出总价的变化。
总价是使用computed计算出来的
总价在在子组件中计算的，只能通过this.$emit(‘自定义事件’)的方式将子组件的总价数据传递给父组件
需要在计算总价的时候触发$emit() 或者监听总价数据变化的时候触发 $emit事件

watch监听compoted
    computed: {
        // 根据单价和数量计算出总价
        total: function () {
			var totalPrice = this.goodsNum * this.price;
			// 计算总价的时候向父组件传递数据
			// this.$emit('totalNumChange', totalPrice);
            return totalPrice;
        }
    },
    watch: {
		// 监听computed中的属性
        total: function (newValue, oldValue) {
            this.$emit('totalNumChange', newValue)
        },
    }

watch

标签：Vue,总价,computed,watch,模板,计算,emit,表达式
来源： https://www.cnblogs.com/zhanglanzuopin/p/15305246.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue watch 监听 computed