vue脚手架组件使用和传参

最新推荐文章于 2023-02-21 23:08:10 发布

陨石猎人

最新推荐文章于 2023-02-21 23:08:10 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue脚手架组件使用和传参

本文链接：https://blog.csdn.net/qq_42205731/article/details/86538522

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

创建

在 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>