prop详解

定义：组件上注册的自定义属性作用：向子组件传递数据特点：

可以传递任何数量的prop
可以传递任何类型的prop

<template>
  <div id="app">
    <UserInfo
    :username="username"></UserInfo>
    //接收
  </div>
</template>

<script>
import UserInfo from'./components'
export default {
  data(){
    return{
      username:'小帅',
      age:28,
      isSingle:true,
      car:{
        brand:'宝马',
      },
      hobby:['篮球','足球','羽毛球']
    }
  },
  //将return中的数据传回prop
  components:{
    UserInfo
  }

}
</script>
<style>

</style>

<template>
  <div class="userinfo"> 
    <h3>我是个人信息组件</h3>
    <div>姓名：{{username}}</div>
    <div>年纪：</div>
    <div>是否单身：</div>
    <div>座驾：</div>
    <div>
      兴趣爱好：
    </div>
  </div>
</template>

<script>
export default {
prop:['username','age']
}
</script>

<style scoped>
.userinfo{
  width: 300px;
  border: 3px solid #000;
  padding: 20px;

}
</style>

props校验作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误

类型校验
非空校验
默认值
自定义校验

props:{
校验的属性名：类型//Number String Boolean
}
//更详细
props:{
校验的属性名：{
  type：类型，//Number String Boolean
  required:true,//是否必填，非空
  default:默认值，//默认值
  validator(value){
  //自定义校验逻辑
  return 是否通过校验
       }
     }
  }，

例

<template>
  <div><div>
    </div></div>
</template>

<script>
export default {
props:{
  w:{
    type:Number,
    require:true,
    default:0,
    validator(value){
      if(value>=0&&value<=100){
        return true
      }else{
        return false
      }
    }
  }
}
}
</script>

<style>

</style>

可以将传的值改为对应的属性值

data&prop的区别

共同点：都可以给组件提供数据区别：

data的数据是自己的随便改
prop的数据是外部的不能直接改，要遵循单向数据流

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
    // 1.自己的数据，随便改（谁的数据谁负责）
    // data(){
    // return {
    //     count:999
    // }
    //2.prop传过来的数据外部的数据
    //不能直接改
    //单向数据流：父组件的prop更新，会单向向下流动，影响到子组件
    props:{
        count:Number
    },
    methods:{
        handleAdd(){
            //子传父 this.$emit(事件名，参数)
            this.$emit('changeCount',this.count+1)

        },
        handleSub(){
            this.$emit('changeCount',this.count-1)

        }
    }


}

</script>

<style>
.base-count{
    margin: 20px;

}
</style>

<template>
  <div id="app">
    <BaseCount
    @changeCount="handleChange"
    :count="count"
    ></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
data (){
  return{
    count:666
  }
},
methods:{
  handleChange(newCount){
    this.count=newCount

  }
},
components:{
  BaseCount
}
}
</script>

<style>

</style>

非父子通信（拓展）-event bus 事件总线

1.创建一个都能访问到的事件总线

import Vue from 'vue'

const Bus =new Vue()

export default Bus

2.在A组件，进行监听Bus的事件

<template>
  <div class="baseA">
    我是A组件
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
    created(){
        //2.在A组件，进行监听Bus的事件
        Bus.$on('sendMsg',(msg)=>{
            
        })
    }

}
</script>

<style>

</style>

3.B组件触发事件的方式传递参数（发布消息）

  <div class="baseB">
    我是B组件
    <button @click="clickSend">发送通知</button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
    methods:{
        clickSend(){
            Bus.$emit('sendMsg','今日晴天，适合郊游')
        }
    }

}
</script>

<style>

</style>

组件通讯详解

prop详解

data&prop的区别