【Vue2】关于组件之间的通讯
组件化开发
概念：
利用封装的思想，把页面上可复用的部分封装成一个个组件，优点便于项目开发和维护
一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为
组件的后缀名 .vue
注册
App.vue根组件，是最大的根组件。
在App.vue中，还可以写入一些小组件, 而这些组件, 要使用, 就需要先注册
局部注册
创建新组件，把独立的组件封装一个.vue文件中，放到components
文件夹。
在这里插入图片描述
引入并配置组件
- 通过import 引入组件
import HeHeader from './components/HeHeader通过组件的components配置 局部注册组件
export default {
components: {
// 组件名：组件 相同可省略
// HeHeader:HeHeader
// 组件名不能是已有标签的名字
HeHeader
}
}- 在template中使用组件
<template>
<div id="app">
<h1>组件的基本使用</h1>
<HeHeader></HeHeader>
</div>
</template>全局注册
- 创建新的组件
- 在
main.js中通过Vue.component()全局注册组件
import HeButton from './components/HeButton'
// 注册全局组件
// 参数1：组件的名字
// 参数2：组件
Vue.component('HeButton', HeButton)- 在template中使用组件
<template>
<div id="app">
<h1>组件的基本使用</h1>
<HeButton></HeButton>
</div>
</template>组件命名方式
1. 短横线命名法
例如：hh-header
2. 大驼峰命名法⭐
例如：HhHeader
组件样式冲突
默认情况下，写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
解决办法
可以给组件加上scoped属性，让此样式只作用于当前组件
例如，在HhButton.vue中
<style lang="less" scoped>
div {
color: pink;
}
</style>原理
- 添加scoped后, 会给当前组件中所有元素, 添加上一个自定义属性
- 添加scoped后, 每个style样式, 也会加上对应的属性选择器
在这里插入在这里插入图片描述
图片描述
组件通讯
每个组件都有自己的数据，存放于data()中，数据之间是相互独立的，无法互相直接访问。
组件通讯：解决跨组件访问数据问题。
组件通讯方式 1. 父传子 2. 子传父 3. 非父子 4. vuex
父传子 props
语法：
- 父组件通过给子组件添加属性传值
例如： 父组件传给子组件money属性
<HeSon :money="money"></HeSon>- 子组件中, 通过props属性接收属性并显示
<template>
<div>子组件 ---> {{ money }}</div>
</template>
<script>
export default {
// props接收到父组件传过来的数据
props: ['money']
}
</script>单向数据流
在vue中需要遵循单向数据流原则
- 父组件的数据发生了改变，子组件会自动跟着变
- 子组件不能直接修改父组件传递过来的props props是只读的
子传父 $emit
语法
- 子组件
MyProduct通过this.$emit(‘事件名’，参数1，参数2 …)触发事件的同时传参
this.$emit('sayPrice', 2)- 父组件给子组件注册一个自定义事件
<MyProduct
...
@sayPrice="sayPrice">
</MyProduct>- 父组件并提供对应的函数接收参数.
methods: {
sayPrice (num) {
console.log(num)
}
},props 校验
props 是父传子, 传递给子组件的数据, 为了提高 子组件被使用时 的稳定性, 可以进行props校验 , 验证传递的数据是否符合要求
默认的数组形式, 不会进行校验, 如果希望校验, 需要提供对象形式的 props
props: {
...
}数据验证方案
- 基础的类型检查 Number
- 多个可能的类型 [String, Number]
- 必填项校验 required: true
- 默认值 default: 100
- 自定义验证函数
{
props: {
// 基础的类型检查
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// -------------------------------------------------------------------------
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
}非父子组件通讯 event bus
使用通用的组件通讯解决方案：event bus
- event bus可以实现任意组件之间的通讯，包括父子组件
- event bus是一种组件通讯解决方案
- 一般非父子组件推荐使用event bus 父子组件不推荐
在这里插入图片描述
例如：Jack组件给Rose组件发数据
- 在
main.js中创建 bus对象，并且挂到Vue的原型上，保证所有的vue组件都能访问到
// 1. 创建event bus
// 实质上 bus就是一个空的vue实例
// 2. 把bus挂载到Vue的原型上，所有的组件都能够通过 this.bus访问到 bus对象
const bus = new Vue()
Vue.prototype.bus = bus- Jack需要通过bus发布事件
methods: {
fn() {
// 发布消息
this.bus.$emit('aa', this.msg)
},
},- Rose通过bus监听事件（订阅事件）
// 钩子函数,,,组件只要创建，就会立即执行created函数
created() {
// 给bus订阅事件
this.bus.$on('aa', (msg) => {
console.log('接收到消息', msg)
this.msg = msg
})
},本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-03-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录