原副标题：通晓Vue.js系列产品实例教程 │ Vue模块的双向报文
为的是精简模块的统计数据传达操作过程，防止即使在某一模块中随便修正统计数据而再次出现纷乱，Vue架构提供更多了下列提议：
（1）双向传达模块的特性，即由父模块把特性值传达给子模块的特性。
（2）在子模块中不随便修正由父模块传至的第一类或字符串类别的特性的文本。
1
Vue模块的双向报文
在解释器1的oneflow.html中，根模块在他们的模版中常把表达式data1和data2传予子模块<add>的特性v1和v2。
■解释器1 oneflow.html
< divid= “app”> < inputv-model.number= “data1”/> < inputv-model.number= “data2”/> < add:v1= “data1”:v2= “data2”> </ add> </ div>< > constaddComponent={ props:[ v1, v2], template: <div>{{v1}}+{{v2}}={{v1+v2}}</div>}constapp=Vue.createApp({ data{return{ data1: 10, data2: 20} },components: {add: addComponent }})
constvm=app.mount( #app) </ >
通过浏览器访问oneflow.html，会得到如图1所示的网页。
■图1 oneflow.html的网页
如果在oneflow.html网页的输入框输入新的数字，根模块的data1和data2表达式会发生更新，<add>模块的v1和v2特性也会被同步更新。由此可见，当父模块的表达式与子模块的特性绑定后，如果父模块的表达式发生更新，那么子模块的特性会同步更新。
子模块获得了父模块传至的特性值后，如果仅仅把它作为初始值，以后还需要做独立于父模块的特定的更新，或者需要依据子模块的特性推算出其他统计数据，该怎么办呢？Vue框架提供更多了下列解决方案：
（1）把特性作为初始值赋值给子模块中由data选项定义的表达式。
（2）定义一个计算特性，它的取值由子模块的特性推算出来。
例如，可以把oneflow.html中的addComponent模块的定义文本的代码改写为：
constaddComponent={ props:[ v1, v2], data{ return{ d1: this.v1, d2: this.v2 }},computed: { //计算特性sum{ returnthis.v1+ this.v2 } ,remainder{returnthis.d1- this.d2 } },template: `<div>{{v1}}+{{v2}}={{sum}}</div><div>{{d1}}-{{d2}}={{remainder}}</div> `}以上d1和d2表达式的初始值为v1和v2特性。尽管Vue不允许在addComponent模块中修正v1和v2特性，但是允许对d1和d2表达式做任意的修正。sum计算特性的取值来自v1和v2特性的和，remainder计算特性的取值来自d1和d2表达式的差。
3
参考书籍
点击上图看详细图书介绍
《通晓Vue.js：Web前端开发技术详解（微课视频版）》
详细阐述用Vue架构的各种技术；深刻揭示前端开发的响应式编程核心思想；介绍与其他流行技术的整合；典型范例帮助读者迅速获得实战经验。
作者：孙卫琴，杜聚宾
价格：119元
扫码优惠购书
实例讲解
通晓Vue.js：
Web前端开发技术详解
精彩回顾
1. Vue模块的命名规则
2 . 注册全局模块和局部模块
3 . 路由导航中抓取统计数据
4. 路由管理器的基本用法
5. 命名路由
6. CSS中DOM元素的过渡模式
7. 插槽slot的基本用法
8. 模块的递归
9. 在Vue项目中使用Axios
10. 自定义指令v-drag范例
11. Vuex中的异步操作
12. 分割setup函数
下期预告
14. Vue的统计数据监听
