组件通信 -- 14种

霞霞哇

已于 2022-07-18 21:15:37 修改

阅读量248

点赞数 2

分类专栏： vue.js 文章标签： vue.js 前端 javascript

于 2022-07-17 19:35:14 首次发布

本文链接：https://blog.csdn.net/weixin_67340539/article/details/125835874

版权

vue.js 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

前言：组件中的数据共有三种形式：data、props、computed

vue中通信方式大概可以分为父子通信，兄弟通信，跨级通信

父子组件通信可以用：

props
$emit / v-on(@)
$attrs / $$listeners
ref
.sync
v-model
$children / $$parent

兄弟组件通信可以用：

EventBus
Vuex
$parent

跨层级组件通信可以用：

provide/inject
EventBus
Vuex
$attrs / $$listeners
$root
路由传参
localStorage / sessionStorage

1. props

父向子传值：props 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。并且props 只读，不可被修改，所有修改都会失效并警告

父组件传送:数据名="数据"

子组件中接收props:['数据名']

// Parent.vue 传送
<template>
    <child :num="100"></child>
</template>

// Child.vue 接收
export default {
  // 写法一: 用数组接收
  props:['num'],
  // 写法二: 用对象接收，可以指定接收的数据类型、设置默认值、是否必传等
  props:{
      num:{
          type:Number,
          require:true
      }
  }
}

2. $emit / v-on(@)

子相父派发事件：子组件通过$emit绑定一个自定义事件给父组件派发events，实际上就是子组件把自己的数据发送到父组件，父组件通过**v-on(@)**监听并接收参数

子组件派发事件(可传递多个参数)$emit('自定义事件名',event1,event2...)

父组件响应v-on自定义事件名='函数名'简写@自定义事件名='函数名'

// Child.vue 派发
export default {
  data(){
      return { msg: "传递一个值" }
  },
  methods: {
      handleClick(){
          this.$emit("sendMsg",this.msg)
      }
  },
}
// Parent.vue 响应
<template>
    <child v-on:sendMsg="getChildMsg"></child>
    // 或 简写
    <child @sendMsg="getChildMsg"></child>
</template>

export default {
    methods:{
        // 声明函数
        getChildMsg(msg){
            console.log(msg) // 传递一个值
        }
    }
}

3. ref

ref 作用在普通的DOM元素上，引用指向的就是该DOM元素;

ref 作用在子组件上，引用的指向就是子组件实例，所以父组件就可以通过 this.$refs 主动获取子组件的属性或方法

子组件ref="refChild"

父组件this.$refs.refChild

// Child.vue
export default {
    data(){
        return {
            name:"xiaxia"
        }
    },
    methods:{
        someMethod(msg){
            console.log(msg)
        }
    }
}

// Parent.vue
<template>
    <child ref="refChild"></child>
</template>
<script>
export default {
    mounted(){
        const child = this.$refs.refChild
        console.log(child.name) // xiaxia
        child.someMethod("调用了子组件的方法")
    }
}
</script>

4. sync

可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

// Parent.vue
<template>
    <child :page.sync="page"></child>
</template>
<script>
export default {
    data(){
        return {
            page:1
        }
    }
}

// Child.vue
export default {
    props:["page"],
    computed(){
        // 当我们在子组件里修改 currentPage 时，父组件的 page 也会随之改变
        currentPage {
            get(){
                return this.page
            },
            set(newVal){
                this.$emit("update:page", newVal)
            }
        }
    }
}
</script>

5. v-model

可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据

// Parent.vue
<template>
    <child v-model="value"></child>
</template>
<script>
export default {
    data(){
        return {
            value:1
        }
    }
}

// Child.vue
<template>
    <input :value="value" @input="handlerChange">
</template>
export default {
    props:["value"],
    // 可以修改事件名，默认为 input
    model:{
        // prop:'value', // 上面传的是value这里可以不写，如果属性名不是value就要写
        event:"updateValue"
    },
    methods:{
        handlerChange(e){
            this.$emit("input", e.target.value)
            // 如果有上面的重命名就是这样
            this.$emit("updateValue", e.target.value)
        }
    }
}
</script>

6.children / parent

官方解释：parent和children主要目的是作为访问组件的应急方法。子实例可以用this.$parent访问父实例，子实例被推入父实例的children数组中

$children：获取到一个包含所有子组件(不包含孙子组件)的 实例对象数组，直接拿到子组件中所有数据和方法

$parent：获取到一个父组件的实例对象，同样包含父节点中所有数据和方法

// Parent.vue
export default{
    mounted(){
        this.$children[0].someMethod() // 调用第一个子组件的方法
        this.$children[0].name // 获取第一个子组件中的属性
    }
}

// Child.vue
export default{
    mounted(){
        this.$parent.someMethod() // 调用父组件的方法
        this.$parent.name // 获取父组件中的属性
    }
}

7. attrs / listeners

多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时就用attrs和listeners，使用方式相同

$attrs：包含父作用域里的非 props 属性集合（class 和 style除外）。通过 this.$ $a tt rs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v - bin d = "$ attrs"

$listeners：包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过 v-on=“$linteners”

// Parent.vue
<template>
    <child :name="name" title="mumu" ></child>
</template>
export default{
    data(){
        return {
            name:"xiaxia"
        }
    }
}

// Child.vue
<template>
    // 继续传给孙子组件
    <sun-child v-bind="$attrs"></sun-child>
</template>
export default{
    props:["name"], // 这里可以接收，也可以不接收
    mounted(){
        // 如果props接收了name就是{ title:mumu }，否则就是{ name:"xiaxia", title:mumu }
        console.log(this.$attrs)
    }
}

8. provide / inject

跨组件通信：不论子组件嵌套有多深, 只要调用了inject那么就可以注入provide中的数据，而不局限于只能从当前父组件的props属性中回去数据

注意：的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象

使用场景：面包屑导航传递分隔符

provide：可以让我们指定想要提供给后代组件的数据或方法

inject：在任何后代组件中接收想要添加在这个组件上的数据或方法，不管组件嵌套多深都可以直接拿来用

// 父组件
export default{
    // 方法一 不能获取 this.xxx，只能传写死的
    provide:{
        name:"xiaxia",
    },
    // 方法二 可以获取 this.xxx
    provide(){
        return {
            name:"xiaxia",
            msg: this.msg // data 中的属性
            someMethod:this.someMethod // methods 中的方法
        }
    },
    methods:{
        someMethod(){
            console.log("这是注入的方法")
        }
    }
}

// 后代组件
export default{
    inject:["name","msg","someMethod"],
    mounted(){
        console.log(this.msg) // 这里拿到的属性不是响应式的，如果需要拿到最新的，可以在下面的方法中返回
        this.someMethod()
    }
}

9. EventBus

EventBus 是中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以使用它完成通信操作，用于小项目少页面

// 方法一
// 抽离成一个单独的 js 文件 Bus.js ，然后在需要的地方引入
// Bus.js
import Vue from "vue"
export default new Vue()

// 方法二 直接挂载到全局
// main.js
import Vue from "vue"
Vue.prototype.$bus = new Vue()

// 方法三 注入到 Vue 根对象上
// main.js
import Vue from "vue"
new Vue({
    el:"#app",
    data:{
        Bus: new Vue()
    }
})

使用如下，以方法一按需引入为例

// 在需要向外部发送自定义事件的组件内
<template>
    <button @click="handlerClick">按钮</button>
</template>
import Bus from "./Bus.js"
export default{
    methods:{
        handlerClick(){
            // 自定义事件名 sendMsg
            Bus.$emit("sendMsg", "这是要向外部发送的数据")
        }
    }
}

// 在需要接收外部事件的组件内
import Bus from "./Bus.js"
export default{
    mounted(){
        // 监听事件的触发
        Bus.$on("sendMsg", data => {
            console.log("这是接收到的数据：", data)
        })
    },
    beforeDestroy(){
        // 取消监听
        Bus.$off("sendMsg")
    }
}

10. Vuex

Vuex 是状态管理器，集中式存储管理所有组件的状态。这一块内容过长，如果基础不熟的话可以看官方文档Vuex

11. $root

$root 可以拿到 App.vue 里的数据和方法

12. slot

就是把子组件的数据通过插槽的方式传给父组件使用，然后再插回来

<!-- Child.vue -->
<template>
    <div>
        <slot :user="user"></slot>
    </div>
</template>
export default{
    data(){
        return {
            user:{ name:"xiaxia" }
        }
    }
}
<!-- Parent.vue -->
<template>
    <div>
        <child v-slot="slotProps">
            {{ slotProps.user.name }}
        </child>
    </div>
</template>

13. 路由传参

通过路由带参数进行传参，A组件通过路由跳转到B组件(带参数传值)，传参方式可划分params传参和query传参

params传参接收用this.$route.params.id
query传参用this.$route.query.id

14. localStorage / sessionStorage

通过SessionStorage(程序退出销毁)、LocalStorage(长期保存)缓存的get,set方法进行传递;

注意：JSON.parse() / JSON.stringify() 做数据格式转换 localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.

window.localStorage.getItem(key)获取数据通过
window.localStorage.setItem(key,value)存储数据