vue-cli 中组件的注册和使用， 父子组件相互传参

什么是组件

组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

模块化和组件化的区别

• 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

• 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。

一,组件注册和使用

     在 components 文件下创建一个自己的 子组件组件文件（sub.vue）；

<!--html区域-->
<template>
    
</template>
 
<!--JS区域-->
<script>
    export default {
        name: "sub"
    }
</script>
 
<!--css区域-->
<style scoped>
 
</style>

  在父组件中引用子组件，

<!--html区域-->
<template>
    //使用组件
    <sub></sub>    
</template>
 
<!--JS区域-->
<script>
    import Sub from './sub'    //引入
    export default {
        name: "index",
        components:{
          sub:Sub     //注册组件
        }
    }
</script>
 
<!--css区域-->
<style scoped>
 
</style>

父组件传值给子组件。

      这个是最简单的,首先父组件通过components引入子组件,如果要传入子组件的值是动态的.可以将该值双向绑定在调用的子组件上,子组件只需要做一件事,那就是通过props接收,如下:

     父组件

    子组件

      

子组件往父组件传值 

    可以定义一个事件来触发响应的$emit使父组件可以知道有事件改变,进而接收对应的参数,如下:

  父组件

 

  子组件