vue组件中数据传递 components props

1：引入组件

import headTop from ‘…/…/components/headTop’
2：申明组件

components:{ headTop }
3：使用组件

<head-top></head-top>

父组件传递数据子组件 , 父组件在模板中调用子组件

父组件:负责创建数据并且传递子组件 , 需要路径
子组件:负责显示数据 , 不要需指定路径

Sub05.vue 子组件负责显示数据

<template>
   <div>{{msg}}</div>
</template>
export default{
   props:{
      msg:{default:""}//声明接收父组件数据msg
         }
   }

Fa06.vue 父组件创建数据并且传递子组件
(1)引入子组件 import Sub05 from “./Sub05.vue”
(2)注册子组件
components:{
Sub05
}
(3) 在模板中调用子组件

<template>
   <sub05  msg="测试数据"></sub05>
</template>

父组件在模板中调用子组件案例
创建子组件 Sub05.vue , Sub05.vue 子组件负责显示数据,不用指定路径
src/components/2.21/exam/Sub05.vue

<template>
    <div>
       Sub05.vue
       <!--1:Sub05.vue 子组件 显示数据-->
       <h1>{{msg}}</h1> 
    </div>
</template>
<script>
export default {
    props:{   //声明接收父组件数据
      msg:{default:""}//消息数据
    }
}
</script>

创建父组件 Fa06.vue , Fa06.vue 父组件创建数据并且传递子组件
src/components/2.21/exam/Fa06.vue

<template>
    <div>
       <h3>Fa06.vue 父组件</h3>
       <!--3:在模板中调用子组件-->
       <sub05 :msg="msg2"></sub05>   
    </div>
</template>
<script>
//1:引入指定子组件
import Sub05 from "./Sub05.vue"
export default {
data(){
   return {
       msg2:"今天2月10日"
   }
},    
//2:注册子组件
components:{
    Sub05
}    
}
</script>

实例:
①src/components/2.21/weixin/common/TitleBar.vue

<template>
    <div class="page-head">
      <!--左侧文字-->
      <span>{{leftTitle}}</span>  
      <!--右侧两张图片-->
      <div class="right-head">
         <div class="searchdiv">
             <img :src="rightFirstImg" style="width:25px;" />
         </div>
         <div class="searchdiv" style="margin-left:20px;">
             <img :src="rightSecondImg"
              style="width:25px;margin-right:15px;"/>
         </div>
      </div>
    </div>
</template>
<script>
export default {
    props:{ //声明接收父组件数据   
      //左侧标题
      leftTitle:{default:""},
      //右侧图片
      rightFirstImg:{default:""},
      rightSecondImg:{default:""}
    }
}
</script>
<style scoped>
/*1:外层父元素弹性布局*/
.page-head{
   display: flex;/*指定布局方式:弹性布局*/
   position: fixed;/*固定定位*/
   z-index: 999;/*显示元素上方*/
   width: 100%;/*填满父无素*/
   justify-content: space-between;/*子元素两端对齐*/
   align-items: center;/*子元素垂直居中*/ 
   background-color:#3e3a39;
   padding-left:7px;/*内边距*/
   padding-right:7px;
   height:48px;/*元素高度*/
   color:#fff;
   font-size:18px;
}
/*2:右侧元素弹性布局*/
.right-head{
    display: flex;
}
</style>

②src/components/2.21/weixin/Home.vue

<template>
    <div>
        <div>
           <!--Home.vue--> 
           <!--3:调用顶部标题子组件-->
           <titlebar
             leftTitle="微信(100)"
             :rightFirstImg="require('../../../assets/ic_search.png')"
             :rightSecondImg="require('../../../assets/ic_add.png')"
           ></titlebar>
        </div>
    </div>
</template>
<script>
//1:引入顶部标题子组件
import TitleBar from "./common/TitleBar.vue"
export default {
 //2:注册顶部标题子组件
 components:{
     //指定标签名称:子组件对象
    "titlebar":TitleBar
 }    
}
</script>