vue组件通信的方式---props

一、父传子

父传子是最简单的组件通信。可以直接利用props。

父组件

<template>
  <div>
    <h1>{{message}}</h1>
     <!--在这里将数据传递给HeaderInfo子组件  -->
    <HeaderInfo :info='message'/>
    <SchoolInfo/>
  </div>
</template>

<script>
import HeaderInfo from './components/Header.vue'
import SchoolInfo from './components/SchoolInfo.vue'

export default {
    name:'App',
    data(){
        return{
            message:'app'
        }
    },
    components:{
        HeaderInfo,
        SchoolInfo
    }
}
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>

子组件

<template>
  <div class="header">
    <h1>{{msg}}</h1>
    
    <!--接受到之后 可以使用父组件的数据  -->
    <h2>app的数据:{{info}}</h2>
  </div>
</template>

<script scope>
export default {
    name:'HeaderInfo',
    data(){
        return {
            msg:'这是头部组件'
        }
    },
    <!--通过props接收  -->
    props:['info']

}
</script>

<style>
    .header{
        background-color: antiquewhite;
        padding: 5px;
    }
</style>

我们还可以在接收的时候同时对数据进行限制

props:{
        info:{
            type:String,//对数据类型进行限制
            require:true//对必要性进行限制 true为必须，false为非必须
        },
        num:{
            type:Number,
            default:120
        },
        color:{
            type:String,
            require:true
        }
    }