比如自定义组件
在引用页面中写下面标签

  1. <helloComp myval="hello next~~"></helloComp>

这样对自定义组件没什么作用
回到 → 自定义组件component的页面export default（）对象内部有一个新的属性

props

props可以是数组或对象，用于接收来自父组件的数据
props可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测，自定义检验和设置默认值

  1. props:{
  2.             //自定义一个变量，用于接收父组件（首页或者其它页面）传入的参数值
  3.             myval:{
  4.                 type:
  5.             }
  6.         }

将props定义为对象，在这个对象里面就要注册变量了，值就是从外部传入的属性
要自定义一个变量，用于接收父组件（首页或者其它页面）传入的参数值
对于这个myval来讲，我们要把所有的参数作为一个对象去构建
类型通过type定义

  1. <!-- 定义组件名称为helloComp -->
  2. <template name="helloComp">
  3.   <view>
  4.     {{msg}}
  5.     <view>
  6.       <input type="text" :value="myval" class="txt"/>
  7.     </view>
  8.   </view>
  9. </template>
  11. <script>
  12.   export default {
  13.     // 定义组件名称为helloComp
  14.     name:"helloComp",
  15.     data() {
  16.       return {
  17.         msg: "这是自定义组件"
  18.       };
  19.     },
  20.     // 定义组件内部使用的属性
  21.     props:{
  22.       //自定义一个变量，用于接收父组件（首页或者其它页面）传入的参数值
  23.       myval:{
  24.         type:String //定义这个参数的类型
  25.       }
  26.     }
  27.   }
  28. </script>
  30. <style>
  31.   .txt {
  32.     color: red;
  33.   }
  34. </style>

传入

  1. <hello-comp myval="hello"></hello-comp>

这里的页面内容，hello 是组件外部定义的
写上后会传入到内部组件

  1. props:{
  2.       //自定义一个变量，用于接收父组件（首页或者其它页面）传入的参数值
  3.       myval:{
  4.         type:String //定义这个参数的类型
  5.       }

回到component的自定义组件页面，内部组件是在这里接收

  1. <view>
  2.     {{msg}}
  3.     <view>
  4.       <input type="text" :value="myval" class="txt"/>
  5.     </view>
  6. </view>

然后数据在这里被绑定，这样myval的值就会在input框里做一个相应的展示