vue-cli3组件嵌套

如下项目：

 1.将子组件Vheader.vue嵌套在App.vue里面步骤：

// 1、创建组件
// 2.导入组件
// 3.挂载组件(挂载到实例化对象中)
// 4.使用组件

App.vue:父组件

<template>
   <!--template是模板，里边必须有一个！！div标签，且是！！包裹的(即template里边必须有一个大的副盒子)-->
  <div id="app">

<!-- 此处是header区域，<Vheader></Vheader>为自定义标签,(命名要大写，因为如果起了个小写，起了个header标签,h5标签里面有叫header标签的,
会重名，因此组件命名首字母大写) -->

使用组件，将子组件Vheader.vue作为父组件App.vue的头部
<Vheader></Vheader>              <!-- 4.使用组件 -->

<!--<!移至子组件Vheader.vue中--  <h3>{{msg}}</h3> --> --> 
<!--<!移至Vheader.vue中    <img :src="logoSrc" alt=""> --> 

<audio :src="audioSrc" autoplay="autoplay" controls=""> 
</audio> 
<ul>
 <li v-for='(item,index) in menus'> {{item}} </li> 
</ul> 


<!-- 为什么h3浏览器显示字体也是黄色,与Vheader设置的相同？ 即在一个组件里边写的样式,成为全局的了,但是只希望设置当前页面的，而不是全局的;
需要style标签里边加一个scopde(注入),加入后可以实现只对当前的标签样式起作用-->

 <h3>猛哥吨吨</h3>

  
  </div>
</template>


<!--<script>标签里边是该组件的DOM操作，处理业务逻辑；type不要写 -->
<script>
  
  import audio1 from'./assets/1.mp3' 
//移至Vheader.vue中 import logoSrc from './assets/logo.png'


//App.vue引入（与Vheader.vue export相呼应,即有抛出有引入）
//导入文件后，如何将他挂载exportdefault中那？此时Vheader不是数据属性(data),是组件,要用到components属性;
  import Vheader from './components/Vheader.vue'          3.导入组件
  

     // 抛出当前的对象，因为main.js有import App from './App.vue',所以我们必须在当前的组件中export default;
  export default{
     name:'App',

     //一个组件中的data必须是一个函数,结构data(){return{}},return一个对象
     data(){
      return{

//移至子组件Vheader.vue中    msg:'hello 组件结构',

        menus:['宫保鸡丁','红烧肉','酸辣汤'],
        audioSrc:audio1
//移至子组件Vheader.vue中    logoSrc:logoSrc
      } 
    },


    // 将Vheader区域可以看成一个组件，有html、样式、js;当项目需求越来越多，页面结构多，处理逻辑就多，样式多，组件代码量就大，因此要分离（解耦,）
components就是用来解耦的，切记组件名首字母大写，可直接以V开头,比如以Vheader.vue为名,首先在components新建文件夹-->
    // components:{对象};为什么是对象？因为App.vue作为父组件,有header、content、footer区域,有很多组件被渲染进来；components里边要写变量名，
以k:value形式
    // 3.挂载组件
    components:{
      // vue支持ES6语法：如果k:value相同,可以省略只写一个
      // 接下来要将Vheader放到头部的一个闭合标签中,div标签属于闭合标签且是头部
      Vheader
    }

  }
 
</script>

<!-- scopde(注入),加入后可以实现只对当前的标签样式起作用,App.vue不写,但是其他每个组件都要写scoped -->
<style scoped>
  /*页面的样式修饰*/
  h3 {
    color: red;
  }
</style>

<!-- 初始写vue易出错，可用排除法、注释法、排错法
1.如audio没有显示出来，可以先把audio注释掉，看看现在的项目有没有问题，如果没有问题，证明audio标签有问题 -->

<!-- webpack把文件都当成可重用的模块，把vue文件也当成了可重用的模块，一个页面里边的可以有header、内容区域、footer区域；

components/Vheader.vue 子组件

<template>           //创建子组件Vheader.vue
    <div class="header">
        <!-- 首先我们先解耦，将App.vue中<h3>{{msg}}</h3>和<img :src="logoSrc" alt="">标签作为头部文件，然后需要将msg、logoSrc等移来 -->

<!--由父组件App.vue移入-->        <h3>{{msg}}</h3>
<!--由父组件App.vue移入-->      <img :src="logoSrc" alt="">
        
    </div>
</template>
<script> 
// <!-- 注意src地址给 -->
/*由父组件App.vue移入*/    import logoSrc from '../assets/logo.png'

// Vheader抛出去了，但此时和App.vue还没有关系，因此需要将Vheader.vue嵌套到App.vue里边，即App.vue应该是Vheader.vue的父组件；
    export default {
        name:'Vheader',        //子组件的名称
        data(){
            return{
/*<!--由父组件App.vue移入 -->*/        msg:'hello 组件结构',
/*<!--由父组件App.vue移入 -->*/        logoSrc:logoSrc


            }
        }
    }
</script>
<style scoped>
h3 {
    color: yellow;
    
}
    
</style>

 注：一个网站里边只要一个Vheader,即header一般不是重用的组件，重用的组件如button等