Vue学习9----Vue中创建组件以及使用组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88970947

效果图：

项目结构：

IHeader.vue是自己创建的组件
App.vue是父组件

IHeader.vue中

<!--模板，里面写html-->
<template>
  <!--根组件，只能有一个根组件-->
  <div>
    <div @click="myHead" class="head">{{msg}}</div>
  </div>
</template>

<!--script里面写逻辑-->
<script>
  export default {
    name: "IHeader",
    data(){
      return{
        msg:'头部组件',
      }
    },
    methods:{
      myHead(){
        alert("点击了");
      }
    }

  }
</script>


<!--style里面写样式-->
<style lang="scss" scoped>
  /*scoped  css只在本文件中起作用*/
  .head{
    width: 100%;
    line-height: 150px;
    text-align: center;
    background-color: aqua;
    font-size: 50px;
  }

</style>

App.vue 父组件中引用IHeader.vue
1、引入组件
import IHeader from ‘./components/IHeader.vue’;
2、挂载组件
components中 ‘IHeader’:IHeader,
3、在模板中使用

template中的跟标签下<IHeader></IHeader>在这里插入代码片

App.vue源码：

<!--Vue中创建组件以及使用组件-->
<template>
  <div id="app">
       <IHeader></IHeader>
       <div class="content">{{msg}}</div>
  </div>
</template>

<script>
/*
1、引入组件
import IHeader from './components/IHeader.vue';
2、挂载组件
components中 'IHeader':IHeader,
3、在模板中使用
template中的跟标签下<IHeader></IHeader>
*/
import IHeader from './components/IHeader.vue';
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    /*前面的组件名称不能和html标签一样,会出现冲突*/
    'IHeader':IHeader,

  }
}
</script>

<style lang="scss" scoped>
  .content{
    font-size: 50px;
  }


</style>

源码下载：