vue2.0-创建单文件组件注册组件以及组件的使用

vue2.0-创建单文件组件注册组件以及组件的使用

 1、项目效果

 

2、项目组件演变

项目组件需求，依次演变。

App.vue为根组件，对应Components目录专门放置vue文件（组件）。

 

 新增公共的头部信息。

 

 

3、项目

项目目录结构，

App.vue根组件

Components：存放自定义子组件

其他目录暂时不管，如下目录结构，

 

组件内部之间调用，Home.vue组件调用Header.vue组件，

 

 

4、源代码如下

App.vue组件配置如下，

<template>

<!-- todolist项目实战 -->

  <div id="app">

    <!--模板中使用home组件-->

    <v-home></v-home>

    <v-news></v-news>

  </div>

</template>

 

<script>

//先引入组件import，然后注册挂载组件components,在模板中使用

import Home from './components/Home.vue'

import News from './components/News.vue'

 

export default {

  name: 'App',  //组件名字，无实际含义

  data() {   //业务逻辑里面定的数据

    return {

      msg: '你好VUE'

    }

  },

  components:{

    'v-home':Home,

    'v-news':News

  },

  methods: {}

}

</script>

 

<style>

h2{

  color: blue;

}

</style>