vue组件间数据传递（vue组件传参），父传子，子传父，非父子组件传值

目录

1.父传子

2.子传父

3. 非父子组件传值

---

 

1.父传子

• 当父组件 想要将一些数据 传递给某一子组件的时候 其方式如下

  • <template>
        <div class="main">
            <v-left :自定义属性名="content">v-left>
            <v-right>v-right>
        div>
    template>
    ​
    ​
    

  • <template>
        <div class="left">
            {{content}}
            
            {{父组件中传值设置的自定义属性名}}
        div>
    template>
    ​
    ​
    

• 总结：父传子 为 三步走

  • 1.父组件传递数据——在父组件中 给 子组件对象绑定自定义属性 属性值为 要传递的数据

  • 2.子组件接收数据——在子组件的配置对象中 写入 props属性 并将属性值 设置为数组/对象 来接收数据

  • 3.子组件使用数据——在子组件的模板中 直接使用props数组项/属性即可

• 注意：

  • 如果我们将props属性值 设置为数组 就只能单纯的接收一下父组件传递的数据

  • 如果我们将props属性值 设置为对象 就不仅可以接收父组件数据 还可以对数据进行一些筛选

• 对象形式接收数据写法如下

  • <template>
        <div class="left">
            {{content}}
            
            {{父组件中传值设置的自定义属性名}}
        div>
    template>
    ​
    ​
    

2.子传父

• vue中子组件给父组件传递数据 是通过发布订阅模式 来实现的

• 具体实现方式如下

  • <template>
        <div class="left">
            {{content}}
            <button @click="fn">按钮button>
        div>
    template>
    ​
    ​
    

  • <template>
        <div class="main">
            <v-left @send=“fn”>v-left>
            <v-right>v-right>
        div>
    template>
    ​
    ​
    

• 总结

  • 上述内容就是父子组件互相传值 的 方式

  • 注意：父子组件间的传值 都是单向数据流

    • 传递数据的一方 如果将传递的数据改变 接收数据的那一方 数据也会一起改变

3. 非父子组件传值

• 在vue中 实现非父子组件传值 也是通过 发布订阅模式 来实现的

  • 非父子组件传值 方式

    • 发布订阅

    • 缓存

    • vuex

• 今天我们主要了解发布订阅模式的非父子组件传值

  • 这种传值方式有一个专属名词——事件总线(eventBus)

• 前面我们学习子传父的时候 知道 子组件向父组件传递数据的时候 使用的就是 发布订阅

  • 子组件实例对象自己发布数据 子组件实例对象自己订阅数据

  • 但是 非父子组件传值的时候 不存在子组件自己订阅数据的机会了

  • 这时 我们会发现 其实如果想发布订阅 我们只需要一个统一的vue实例即可。由这个vue实例发布 也由它来订阅

  • 这就是事件总线机制的原理

• 事件总线机制的写法

  • 1.先在main.js中 编写一个生成vue实例的代码

    • //在main.js中
      //事件总线
      //将事件总线的vue实例 添加到Vue构造函数对应的原型中 这样 每一个vue实例 都可以用到这个事件总线
      //由于 组件都是vue实例对象  也就是说  任何一个组件 都可以用到 事件总线了
      Vue.prototype.eventBus = new Vue();
      

    • 注意：事件总线的vue实例 必须要写在main.js的new Vue前面 因为 new Vue如果执行了 页面就已经渲染完了，如果渲染完之后 再做事件总线 就来不及了。

  • 2.使用事件总线提供的vue实例对象 来进行数据的发布 和 订阅

    • 2.1发布

      • 使用事件总线提供的vue实例 调用$emit方法来发布数据

      • 当前组件的vue实例.eventBus.$emit("自定义事件名",要发布的数据)

      • <template>
            <div class="left">
                {{content}}
                <button @click="fn">按钮button>
            div>
        template>
        ​
        ​
        

    • 2.2接收数据

      • 使用事件总线提供的vue实例 提供的$on方法 接收数据

      • 组件vue实例.eventBus.$on("自定义事件名",(res)=>{
            //res形参 就会接收到 发布的数据
        })