Vue组件间通信

最新推荐文章于 2024-09-20 15:25:29 发布

丹&d

最新推荐文章于 2024-09-20 15:25:29 发布

阅读量526

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sdrfsef/article/details/124888366

版权

本文详细介绍了Vue组件之间的通信方法，包括父传子、子传父、父子间通信扩展和兄弟间通信。父传子主要通过v-bind和props实现，子传父则可以使用自定义事件或ref。父子间通信扩展涉及到$parent、$children、$refs和$root的使用。兄弟间通信可通过全局事件总线、消息订阅与发布等方式实现，其中，全局事件总线的使用包括安装和使用两部分。

摘要由CSDN通过智能技术生成

前言: 我们把页面拆分成不同的组件,提高了复用性,但是拆分完组件后,有的数据,在多个组件中都需要使用,但是我们只能在其中一个组件中获取到数据,此时.我们就需要根据组件间的关系来传递数据

1.父传子

核心子组件中 props 接收 + 父组件中 v-bind 传递数据

1. 父组件中在使用子组件时,利用v-bind把数据传递给子组件

2.子组件中,利用props,接收数据

3.在子组件中使用接收到的数据

props 接收形式 :

1.数组 [ 'params ' ] 直接接收数据

2.对象 { params : type } 对接收到的数据类型进行制定

3.多层对象{ params : type , required : true , default : 1} 对接收到的数据类型,是否必传,默认值进行制定

注意 : props接收到的数据一般不建议更改,如果确实需要更改,在子组件中,声明一个中转属性,把接收到的值作为初始值

代码如下

<div id="app">
    <far-component></far-component>
</div>
<template id="far">
    <div style="background-color: orange;width: 400px;height: 400px;">
        <h1>{
  {value}}</h1>
        <son-component :val="value"></son-component>
    </div>
</template>
<template id="son">
    <div style="background-color: antiquewhite;width: 200px;height: 200px;">
    <h1>子组件收到的数据:{
  {val}}</h1>
    </div>
</template>
<script>
    let sonComponent = {
        template: '#son',
        // props: ['val'],
        // props:{
        //     val:String
        // },
        props:{
            val:{
                type:String
                required:true,
                default:'默认值'
            }
        }
    }
    let farComponent = {
        template: '#far',
        data(){
            return {
               value:'父组件数据'
            }
        },
        components: {sonComponent}
    }
    new Vue({
        el: '#app',
        components: {farComponent}
    })
</script>