命名特点: 命名时用小驼峰, 在组件标签上用小写-, 在模板中用小驼峰

使用props属性传值的步骤:

1, 在子组件对象中使用props字段声明自定义属性
2, 在子组件标签上绑定属性,传入数据
3，在子组件模板中使用自定义属性绑定和渲染，也可以在对象中监听和计算
注意： 由于单向数据流限制， 不要在子组件中修改props属性值

单向数据流: 组件中的数据只允许由父组件传入子组件, 父组件数据更新时,子组件同步更新, 但是子组件不能直接修改父组件中的数据

  1. <body>
  2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
  3.     <div id='myApp'>
  4.         父组件: {{fatherObj}}
  5.         <hr>
  6.         <!-- 在子组件标签上绑定自定义属性,传入数据 -->
  7.         <my-com child-age="50" :child-obj="fatherObj"></my-com>
  8.     </div>
  9.     <!-- 组件模板 -->
  10.     <template id='myTem'>
  11.         <div>
  12.             age: {{childAge}} <br>
  13.             name: {{childObj.name}} <br>
  14.             arr: <i v-for="item in childObj.arr">{{item}}</i>
  15.         </div>
  16.     </template>
  17.     <script>
  18.         Vue.component('myCom', {
  19.             template: '#myTem',
  20.             // props字段用于定义属性, 来接收父组件传值
  21.             // 命名特点: 命名时用小驼峰, 在组件标签上用小写-, 在模板中用小驼峰
  22.             props: ["childObj", "childAge"],
  23.             watch: {
  24.                 'childObj.age'(newValue, oldValue){
  25.                     console.log("ageChange")
  26.                 }
  27.             },
  28.             created() {
  29.                 console.log(this.childAge, this.childObj)
  30.                 // 父组件传入子组件的prop数据是只读的, 不能改, 一改就报错, 如下 
  31.                 // this.childAge = 60;// Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "childAge" 
  32.                 // 单向数据流: 组件中的数据只允许由父组件传入子组件, 父组件数据更新时,子组件同步更新, 但是子组件不能直接修改父组件中的数据
  33.                 this.childObj.age = 30;  // 在不影响内存地址的前提下,不报错,但不建议这样写
  34.                 this.childObj = {age: 30};  // 报错
  36.             },
  37.         })
  38.         new Vue({
  39.             el: '#myApp',
  40.             data: {
  41.                 fatherObj: {
  42.                     name: "父组件中的数据",
  43.                     age: 20,
  44.                     arr: [1,2,3,4,5]
  45.                 }
  46.             },
  47.             created() {
  48.                 setTimeout(() => {
  49.                     this.fatherObj.age = 30
  50.                 }, 1000);
  51.             },
  52.         })
  54.     </script>
  56. </body>