我们知道 vue 中父子俩部件的关键定义是单项工程数据流分析难题，props 是单项工程传送的。那到底什么叫单项工程数据流分析难题，本文来汇总一下有关这一知识的学习心得。

文章正文

　　1.父部件传值给子部件

<div id=\"app\">    <blog-item :title=\"title\"></blog-item></div>// 界定子部件Vue.component(\"blog-item\", {      props: [\'title\'],      data() {        return {        }      },      template: \"<p>{{title}}</p>\" })// 定義父部件new Vue({      el: \"#app\",      data() {        return {          title: \"msg\",        }      },    })

父部件根据  :title = \”title\” 将值传送给子部件，子部件中根据 props 来接受父部件的值，随后根据插值法关系式3D渲染在网页页面中。

　　2.子部件的 props 种类管束难题

　　普遍的种类管束如下所示：

    props: {      title: String,      likes: Number,      isPublished: Boolean,      commentIds: Array,      author: Object,      callback: Function,      contactsPromise: Promise // or any other constructor    }

除开上边普遍的种类外，vue 还带来了构造方法和自定义函数来源于界定子部件 props 的种类。

　　（1）构造方法自定种类

    //2个部件公共性的自定义函数      function Person (firstName, lastName) {        this.firstName = firstName        this.lastName = lastName      }      //子部件中应用      Vue.component(\'blog-post\', {      props: {        author: Person      }      //父部件中应用      var obj = new Person(\"1\",\"2\")      <blog-post :author=\'obj\'></blog-post>

上边的编码中，最先界定一个公共性的自定构造方法，根据该构造方法来可以来建立一个目标，该案例目标有两个特性，分别是 firstName 和 lastName，在父部件中启用该构造方法建立一个 obj 案例并传送给子部件，子部件界定种类为构造方法的 prop 接受该目标。

　　（2）自定义函数自定种类

    // 自定义函数     Vue.component(\'blog-post\', {      props: {        propsA: String,//务必是字符串类型        propsB: [String,Number],//好几个可选择的种类        propsC: {type:Number,default:100},//界定种类并设定初始值        // 自定认证涵数        propsD:{          validator: function (value) {            // 这一值务必配对以下字符串数组中的一个            return [\'success\', \'warning\', \'danger\'].indexOf(value) !== -1         }        }      }

vue 中给予了更加灵活的来源于界定子部件接受主要参数的种类，上边的编码中根据自定了认证涵数来管束父部件中的传值种类。

　　3.单项工程数据流分析难题

　　单边数据流分析是vue 中父子俩部件的关键定义，props 是单边关联的。当父部件的特性值产生变化的情况下，会传达给子部件产生对应的转变 ，进而产生一个单边下滑的关联，父部件的特性更改会流入下滑子部件中，可是相反，为了更好地避免子部件不经意间改动了父部件中的信息而危害到别的的子部件的情况，vue 要求了从上往上的数据流分析是不允许的。

当父部件的特性更改，会传达给子部件，而子部件的特性更改不容易危害父部件，那样的话很有可能会感觉 props 有点儿可有可无了，只有复位部件的情况下应用，在子部件内不可以完成实际操作，因而我们在应用的过程中常常有二种简易房去实际操作props:（1）界定一个静态变量，并且用props 复位它，之后实际操作这一静态变量。（2）界定一个计算属性，解决props并回到。

  <div id=\"app\">    <blog-item :title=\"title1\"></blog-item>    <blog-item :title=\"title2\"></blog-item>    <blog-item :title=\"title3\"></blog-item>    <hr>    <button @click=\'toclick\'>点此</button>  </div>  // 界定子部件    Vue.component(\"blog-item\", {      props: [\'title\'],      data() {        return {        }      },      template: \"<p>{{title}}</p>\"    })    // 父部件    new Vue({      el: \"#app\",      data() {        return {          title1: \"111\",          title2: \"222\",          title3: \"333\"        }      },      methods: {        toclick() {          this.title3 = \"000\"        }      }    })

  <div id=\"app\">    <blog-item :title=\"title\"></blog-item>  </div>  // 界定子部件    Vue.component(\"blog-item\", {      props: [\'title\'],      computed: {        computedTitle() {          return \"computedTitle\"   this.title        }      },      data() {        return {          subTitle: \"subTitle\"   this.title        }      },      template: \"<p>{{title}}==={{subTitle}}==={{computedTitle}}</p>\"    })    // 父部件    new Vue({      el: \"#app\",      data() {        return {          title: \"111\",        }      },    })

写在最终

　　之上便是文中的所有内容，期待给阅读者产生一丝的作用和发展，便捷得话点个关心，新手的发展踩坑之途会不断升级一些工作上常用的情况和技能点。