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>
