组件传值

单向数据流

//父
1.import引入
2.注册
3.使用
<ComponentChild :msg="msg" :handler="myclick"  v-bind="obj"  a="1" b="2" c="3" />

 //子
 <script>
     export default {
       //1.props:[],
       //2.props: {msg: String,obj: String}
       //3.
       props: {
           msg{
              type: String,
              // required 需要  必填
              required: true,
           }
       }
       //4. 自定义验证
       mobile: {
            type: String,
            // validator 验证  自定义验证
            validator(v) {  // v  传递过来的值
                if (!/^1[3-9]\d{9}$/.test(v)) {
                    // 验证失败
                throw new Error('你的手机号格式错误，请重新传递');
                }
                // 验证成功
                return true;
            }
        }
     }
 </script>

created() {
        // 父组件传递过来的自定义属性，获取没有接收的属性
        console.log(this.$attrs);

子传父

 //子级
 <button @click="handler">去调用的传递过来的自定义属性</button>
 handle(v){
  this.$emit('myevent'，v)
 } 
 //para1 父级自定义事件名

  //父级
  <Component @myevent=handle  />
  handle（v）{
     console.log(v)
     //v就是从子级传输过来的数据
  }