小程序封装组件详解父传子

在封装组件的时候，我们需要创建一个文件夹，用来专门管理我们封装的组件哈~；
这个文件夹的名字就是components；
然后右击这个文件夹；再次创建一个文件夹，就命名为你的组件名称（tab文件夹 也就是组件名）；
（以上的步骤就是连续两次创建文件夹哈~）
然后右击，选择创建component；
这样就完成了组件的创建哈~
我们创建的组件在app.json中是不会记录我们创建的组件；
只会记录我们创建的页面

ps=>在组件命名的时候不要使用中横线‘-’

子组件

// components/login-input/login-input.js
Component({
    /**
     * 组件的属性列表 properties是接受外界传递过来的值
     */
    properties: {
        myplaceholder:{
            type:String,
            value:"请输入手机号码" //默认值
        },
        haeder:{
            type:String,
            value:"手机号码"  //默认值
        }
    },
})
=====================
在小程序中动态绑定属性值，不需要冒号哈~；
直接花括号就可以了

<view class="flex-cont">
    <text class="text-head">{{haeder}}</text>
    <input type="number" placeholder="{{myplaceholder}}" 
    class="inp-tel" maxlength="11"  />
</view>

====================
.flex-cont{
    display: flex;
    align-items: center;
    
}
.inp-tel{
    width: 600rpx;
    height: 80rpx;
    border: 1px solid #ccc;
    margin: auto;
    background: #ccc;
    border-radius: 10rpx;
    padding-left: 10rpx;
    box-sizing: border-box;
}

我们已经封装好了这个组件；
那么我们在页面上引入组件了
首先在使用页面中的xxx.json中引入注册

{
  "usingComponents": {
    "myinput":"/components/logininput/logininput"
  }
}

在页面中就可以使用了
<myinput myplaceholder="请输入手机号码1" haeder="手机号"></myinput>