vue脚手架组件使用和传参

创建

  在 components 文件下创建一个自己的 组件文件（index.vue）

<template>
<div>
  <lz-view :childVal='name'></lz-view>
</div>
</template>
<script>
import todayHou from './todayHou'
export default {
  name:'index',
  data(){
     return {
       name:'德怀恩.韦德'
     }
  },
  components:{
   'lz-view':todayHou
  }
}
</script>
<style>

</style>

在 components 文件下创建一个自己的子组件文件（todayHou.vue）

<!--html区域-->
<template>
    <div class="hw">
      {{ childVal }}
    </div>
</template>
 
<!--JS区域-->
<script>
    export default {
        name: "todayHou",
      data(){
          return {
        }
      },
      props:{
        childVal:String
      }
    }
</script>
 
<!--css区域-->
<style scoped>
.hw{
  color: #485126;
}
</style>