vue的组件通信和插槽

目录

组件通信

父组件向子组件传递数据

 props

子组件向父组件传递数据

多个参数

非父子组件之间通信

Vue 组件间通信有哪几种方式？ 

插槽

匿名插槽

具名插槽

插槽作用域

---

组件通信

---

父组件向子组件传递数据

1.父传子: 父变,子变,子变,父不变,并且报错.
2.父传子:父变,子变,子变,父变,需要传递一个对象
3.父传子: 父变,子不变,子变, 父不变, 需要在子组件中将数据传递新的data属性

父级 

Parent.vue

 子级

总结:
 找到父子组件的关联点
   父组件:通过自定义属性传递数据
  子组件:通过props选项接受数据
  
  2）ref 与 $parent / $children 适用 父子组件通信
  ref：如果在普通的 DOM 元素上使用，引用指向的就是
  DOM 元素；如果用在子组件上，引用就指向组件实例
   $parent / $children：访问父 / 子实例 

 props

作用: 父组件向子组件传递时,通过props选项来接受.
props的值: 对象 | 数组

 props的值为:{},则表示在props中可以做数据类型的校验
校验类型:Number String Array Object Function Boolean

required:  #必填项
type:            #类型
validator: #验证器
default:   #默认值

Child.vue

子组件向父组件传递数据

总结
    子组件:通过触发$emit来传递自定义事件
    父组件:触发自定义事件来触发父组件的事件函数,通过参数来接受数据
    
    接受子组件的数据的方式:
        1.显示接收: 在事件函数中$event
        3.隐士接收: 在事件函数声明处,直接通过形参来接收

 

Parent

Child

多个参数

非父子组件之间通信

方式有三种:

1.eventBus A组件--> B组件同时存在,并且在组件实现事件的传递,

2.本地存储: localStorage sessionStorage

3.vuex状态管理

Vuex 适用于 父子、隔代、兄弟组件通信 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。改变 store 中的状态的唯一途径就是显式地提交 (commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化。

步骤

在Vue的原型链上实例化vue

main.js
Vue.prototype.$eventBus = new Vue();

通过触发$emit方法来从触发自定义 事件

this.$eventBus.$emit('自定义事件的名称',参数)

通过$on监听自定义事件的触发

this.$eventBus.$on('自定义事件的名称',(e)=>{
  //e:接受传递的数据    
})

 

Box1.vue

Box3

Vue 组件间通信有哪几种方式？ 

Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

（1）props / $emit 适用 父子组件通信 这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref 与 $parent / $children 适用 父子组件通信 ref：如果在普通的 DOM 元素上使用，引用指向的就是DOM 元素；如果用在子组件上，引用就指向组件实例$parent / $children：访问父 / 子实例

（3）EventBus （$emit / $on） 适用于 父子、隔代、兄弟 组件通信 这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）Vuex 适用于 父子、隔代、兄弟组件通信 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。改变 store 中的状态的唯一途径就是显式地提交 (commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化。

 

插槽

---

系统中提供了一个组件slot:槽口
插槽又名槽口

匿名插槽

Index

Child

具名插槽

 

 

Index

Child1

插槽作用域

作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式。

Index

Child2