Vue中创建单文件组件 注册组件 以及组件的使用

<template>

  <div id="app"> 

     <v-home></v-home>

     <hr >

     <br>

     <v-news></v-news>

  </div>
</template>

<script>

  /*
  1、引入组件

  2、挂载组件

  3、在模板中使用
  */
   import Home from './components/Home.vue';

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

   export default {
      data () {
        return {

         msg:'你好vue'
        }
      },
      components:{   /*前面的组件名称不能和html标签一样*/
        'v-home':Home,
        'v-news':News
      }
    }
</script>

<style lang="scss">

</style>

<template>

    <div>

        <h2 class="header">这是一个头部组件</h2>

    </div>

</template>

<script>
    export default {

        data(){

            return{

                msg:'这是一个头部组件'
            }
        }

    };
</script>

<style lang="scss">

.header{

    background:#000;

    color:#fff;
}

</style>

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">

            <v-header></v-header>
            <br>
            <hr>

            <h2>这是一个首页组件--{{msg}}</h2>

            <button @click="run()">执行run方法</button>

    </div>

</template>

<script>
    //引入头部组件

    import Header from './Header.vue';

    export default{

        data(){

            return {

                msg:'我是一个首页组件msg'
            }
        },
        methods:{

            run(){

                alert(this.msg);
            }
        },
        components:{

            'v-header':Header
        }

    }

</script>

<style lang="scss" scoped>

    /*css  局部作用域  scoped*/

    h2{

        color:red
    }

</style>

<template>
    <div>
        <v-header></v-header>
        <h2>这是一个新闻组件</h2>

        <ul>

            <li >

                    111111
            </li>
            <li>

              2222
            </li>
            <li>

              333333
            </li>
        </ul>
    </div>

</template>

<script>

  //引入头部组件

   import Header from './Header.vue';

    export default {

        data(){

            return{

                msg:'我是一个新闻组件'
            }
        },components:{

            'v-header':Header
        }

    };
</script>

<style lang="scss">

</style>