vue.js 前端 javascript 【Vue】组件通信组件通信

       个人主页：五敷有你      

 系列专栏：JVM

⛺️稳中求进，晒太阳

组件通信

组件通信，就是指组件与组件之间的数据传递

组件的数据是独立的，无法直接访问其他组件的数据想用其他组件的数据-->组件通信

组件关系：

父子关系

props和$emit

prop定义：组件上定义的属性prop作用：向子组件传递数据特点：

可以传递任何数量的prop可以传递任何类型的propprops的校验

为组件的prop指定验证要求，不符合要求，控制台就会有错误显示语法：类型校验非空校验默认值自定义校验

//类型校验

props:{

检验的属性名：类型

}

//全

props:{

校验的属性名:{

type：类型，

require:true,

default:"默认值",

validator(value){

//自定义校验逻辑

return 是否通过校验

}

}

}

父传子

子传父

非父子关系

provide和injecteventbus通用解决方案：Vuex（适合复杂业务场景）

小黑记事本（组件化版）

App.vue

TodoHead.vue

TodoMain.vue

TodoFooter.vue

非父子间通信（两种方式）

非父子通信（enent bus）

作用：

非父子组件之间，进行简易的消息传递（复杂场景→Vuex）

步骤：

创建一个都能访问到的事件总线（空的VUe实例）→utils

文件名：EventBus.js

创建一个都能访问到的事件总线(空的Vue实例)

import Vue from 'vue'

const Bus=new Vue()

export default Bus

        2. A组件（接收方）,监听Bus实例的事件

        3. B组件（发送方）,触发Bus实例的事件

import Bus from '../utils/EventBus'

export default {

methods:{

clickSend(){

//3.B组件触发事件的方式传递参数

Bus.$emit("sendMsg","今天晴天，适合出去玩")

}

}

}

非父子通信--provide&inject

provide & inject 作用：跨层级共享数据

父组件provide提供数据

export default{

provide(){

//普通类型【非响应式】

color:this.color,

//复杂类型【响应式】

userInfo:this.userInfo

}

}

       2. 子/孙组件inject取值使用

export default{

inject:['color','userInfo'],

created(){

console.log(this.color,this.userInfo)

}

}

精彩内容

 您阅读本篇文章共花了：