孙卫琴的《精通Vue.js》读书笔记-Vue组件的单向数据流

本文参考孙卫琴，杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

为了简化组件的数据传递过程，避免因为在某个组件中随意修改数据而出现混乱，Vue框架提供了以下建议：
（1）单向传递组件的属性，即由父组件把属性值传递给子组件的属性。
（2）在子组件中不随意修改由父组件传入的对象或数组类型的属性的内容。
在例程1的oneflow.html中，根组件在自己的模板中会把变量data1和data2传给子组件的属性v1和v2。

例程1 oneflow.html

    <div id="app">
      <input v-model.number="data1"/>
      <input v-model.number="data2"/>
      <add :v1="data1"  :v2="data2"></add>
    </div>

    <script>
      const addComponent={
        props:['v1','v2'],
        template: '<div>{{v1}}+{{v2}}={{v1+v2}}</div> '
      }
      const app=Vue.createApp({
        data(){
          return {data1:10,data2:20}
        },
        components: {  
          'add' : addComponent  
        }
      })

      const vm=app.mount('#app')
   </script>

通过浏览器访问oneflow.html，会得到如图1所示的网页。

图1 oneflow.html的网页

如果在oneflow.html的网页的输入框输入新的数字，根组件的data1和data2变量会发生更新，组件的v1和v2属性也会被同步更新。由此可见，当父组件的变量与子组件的属性绑定后，如果父组件的变量发生更新，那么子组件的属性会同步更新。
子组件获得了父组件传入的属性值后，如果仅仅把它作为初始值，以后还需要做独立于父组件的特定的更新，或者需要依据子组件的属性推算出其他数据，该怎么办呢？Vue框架提供了以下解决方案：
（1）把属性作为初始值赋值给子组件中由data选项定义的变量。
（2）定义一个计算属性，它的取值由子组件的属性推算出来。

例如可以把oneflow.html中的addComponent组件的定义内容的代码改写为：

      const addComponent={
        props:['v1','v2'],
        data(){
          return {
            d1:this.v1, d2: this.v2
          }
        },
        computed: {  //计算属性
          sum(){  
            return this.v1+this.v2
          } ,
          remainder(){
            return this.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变量的差。