1、组件模块化

header子组件，比如某个页面 header.vue

<template>
  <div>{{title}}</div>
</template>
<script>
  export default {
    data () {
      title: '标题'
    }
  }
</script>
<style scoped>
</style>

footer子组件，比如某个页面 footer.vue

<template>
  <div>{{footer}}</div>
</template>
<script>
  export default {
    data () {
      footer: '底部角标'
    }
  }
</script>
<style scoped>
</style>

父组件，比如某个页面 index.vue，使用header和footer做拼装

<template>
  <div>
    <!-- 和components中的暴露出的组件名字对应，驼峰对应中划线全小写命名 -->
    <header-cpn></header-cpn>
    <footer-cpn></footer-cpn>
  </div>
</template>
<script>
  // import后的组件名字可以任意定义，驼峰命名在html层的使用，会自动映射为中划线命名,全小写
  import FooterCpn from './footer'
  import HeaderCpn from './header'
  export default {
    // 暴露出组件
    components: {
       FooterCpn, HeaderCpn
    }
  }
</script>
<style scoped>
</style>

最终输出

<div>
  <div>标题</div>
  <div>底部角标</div>
</div>

2、组件父子数据通信

2.1、组件数据父传子 —— props

这里修改上面的组件模式，数据由父组件index.vue传入footer.vue和header.vue

header子组件，比如某个页面 header.vue

<template>
  <div>{{titleName}}</div>
</template>
<script>
  export default {
    // 此处定义titleName字段，驼峰命名，由外部注入，外部注入时使用中划线分割
    props: ['titleName']
  }
</script>
<style scoped>
</style>

footer子组件，比如某个页面 footer.vue

<template>
  <div>{{footerName}}</div>
</template>
<script>
  export default {
    // 此处定义footerName字段，驼峰命名，由外部注入，外部注入时使用中划线分割
    props: ['footerName']
  }
</script>
<style scoped>
</style>

父组件，比如某个页面 index.vue，使用header和footer做拼装，将父组件数据传入子组件

<template>
  <div>
    <!-- 此处将父组件中的部分数据传入子组件，留意对应props的属性前的冒号代表动态模板数据绑定 -->
    <header-cpn :title-name="header"></header-cpn>
    <footer-cpn :footer-name="footer"></footer-cpn>
  </div>
</template>
<script> 
  import FooterCpn from './footer'
  import HeaderCpn from './header'
  export default {
    data () {
      return {
        header: '标题',
        footer: '底部角标'
      }
    },
    // 暴露出组件
    components: {
       FooterCpn, HeaderCpn
    }
  }
</script>
<style scoped>
</style>

最终输出

<div>
  <div>标题</div>
  <div>底部角标</div>
</div>

2.2、组件数据子传父 —— $emit与事件响应

试想一个电商购物车应用场景，子组件模块关注【单价】与【单品数量】，父组件根据子组件的总价，处理是否包邮

子组件 child.vue

<template>
  <!-- 每次点击count值加1 -->
  <div @click="handleAddClick">点我 +1</div>
</template>
<script>
  export default {
    data () {
      return {
        count:0,
        singlePrice: 100
      }
    }
    methods: {
      handleAddClick () {
        this.count++
        // 计算总价，然后通知父组件总价数额
        var totalPrice = this.singlePrice * this.count
        this.$emit('onTotalPriceChange', totalPrice)
      }
    }
  }
</script>
<style scoped>
</style>

父组件index.vue，获得总价，决定包邮逻辑

<template>
  <!-- 接收子组件广播的事件与数据，通过methods处理后续逻辑 -->
  <child @onTotalPriceChange="handleTotalPriceChange" ></child>
</template>
<script>
import Child from './child'
export default {
  methods: {
    // data参数接收子组件传递来的内部数据，或者作为钩子触发点
    handleTotalPriceChange (data) {
        if (data > 50) {
            alert('包邮')
        }
    }
  }
  components: {
     Child
  }
}
  
</script>
<style scoped>
</style>

2.3、(使用场景相对低频，留个印象)父组件调用子组件的各种行为 —— $refs

父组件通过获取子组件的ref命名，来获得子组件的作用域，调用子组件中的methods

子组件child.vue

<template>
</template>
<script>
  export default {
    methods: {
      // 子组件的方法
      sayHello () {
        alert('hello')
      }
    }
  }
</script>

父组件index.vue调用自组件的sayHello方法

<template>
  <div @click="handleClick">
    <!-- 定义子模块被refs调用时的命名 -->
    <child ref="theChild"></child>
  </div>
</template>
<script>
  import Child from './child.vue'
  export default {
    methods () {
      handleClick () {
        // 通过$refs来触发子模块的逻辑
        this.$refs['theChild'].sayHello()
      }
    },
    components: { Child }
  }
</script>