12种方式实现vue组件通信

  • 我们知道vue组件通信有很多种，这里我把自己所知道12种vue组件通信总结出来

1：父子组件通信 ，（v-bind和props实现父子传值）

  • parent.vue
  <template>
    <div class="parent">
      <Child name="张三"/>
    </div>
  </template>
  • child.vue
  <template>
    <div class="child">
      <h1> 接收父组件传递过来的值 {{name}}<h1/>
    </div>
  </template>

  <script>
   export default {
     props: {
       name: {
         type: String,
       }
     },
     data() {
       return {

       }
     }
   }
  </script>
 -当然在父组件中找到子组件标签，传递一个函数过去，在子组件接收这个函数，然后可以实现所谓的父子通信

2：子父组件通信 （借助$emit发送自定义事件，在父组件中找到子组件标签，绑定这个自定义事件）

  • parent.vue

  <template>
    <div class="parent">
      <Child @getMessage="getMessage"/>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {}
     },
     methods: {
       getMessage(e) {
         console.log("e====",e) // 这个e就是子组件传递过来的值
       }
     } 

   }
  </script>
  • child.vue
  <template>
    <div class="parent">
     <button @click="sendMessage"></button>
    </div>
  </template>

  <script>
   export default {
     data() {
       return {

       }
     },
     methods: {
       sendMessage() {
         this.$emit("getMessage",{id:1,name:"张三"})
       }
     }
   }
  </script>

3：非父子组件通信（实例bus,发布订阅模式）

  • main.js
 vue.proptotype.$bus = new Vue()
  • grandpa.vue
  <template>
    <div class="grandpa">
     <button @click="sendMessage"></button>
    </div>
  </template>

  <script>
   export default {
     data() {
       return {}
     },
     methods: {
       sendMessage() {
         this.$bus.$emit("getMessage",{id:1,name:"张三"})
       }
     }
   }
  </script>
  • grandson.vue

  <template>
    <div class="grandson">
      <Child/>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {}
     },
     mounted() {
       this.$bus.$on("getMessage",(e) => {
         console.log("e====",e) // 这个e就是接收传递过来的值
       })
     }

   }
  </script>

4：跨级组件传值(provide和inject)

  • grandpa.vue
  <template>
    <div class="grandpa">
     <button ></button>
    </div>
  </template>

  <script>
   export default {
     data() {
       return {
         name: "张三"
       }
     },
     provide() {
       return {
         app: this
       }
     }
   }
  </script>
  • grandson.vue

  <template>
    <div class="grandson">
      <h1>{{app.name}}</h1>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {}
     },
     inject: ["app"]

   }
  </script>

5：跨级组件传值(attrs,借助v-bind="attrs"，后代组件并不会继承传递的props属性)

  • grandpa.vue
  <template>
    <div class="grandpa">
     <father name="张三" age="18" gender="男"/>
    </div>
  </template>

  <script>
   export default {
     data() {
       return {}
     },
   }
  </script>
  • father.vue

  <template>
    <div class="father">
     <grandson v-bind="$attrs"/>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {}
     },
   }
  </script>
  • grandson.vue

  <template>
    <div class="grandson">
      <h1> 姓名：{{$attrs.name}}-----年龄: {{$attrs.age}} ---- 性别： {{$attrs.gender}}</h1>
    </div>
  </template>
  <script>
   export default {
     inheritAttrs: false, (默认为true) // 如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false，说白/// 了就是不在子组件标签显示传递的自定义属性
     data() {
       return {}
     },
   }
  </script>

6：跨级组件传值(listeners,借助v-on="listeners"，它是一个对象，里面包含了作用在这个组件上的所有监听器，不包括.native事件)

  • grandpa.vue
  <template>
    <div class="grandpa">
     <father @getMessage="getMessage"/>
    </div>
  </template>

  <script>
   export default {
     data() {
       return {}
     },
     methods: {
      getMessage(e) {
        console.log("接收孙子组件传递过来的参数",e)
      }
     }
   }
  </script>
  • father.vue

  <template>
    <div class="father">
      <!-- 在孙子组件上 绑定这个监听器 -->
      <grandson v-on="$listeners"/>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {}
     },
   }
  </script>
  • grandson.vue

  <template>
    <div class="grandson">
      <button @click="sendMessage"> Button </button>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {}
     },
     methods：{
        sendMessage() {
          console.log("发送")
          this.$emit("getMessage","你好爷爷")
        }
     }
   }
  </script>

7：父子组件通信parent和children(一般不建议使用childen和parent,耦合度过高)

  • father.vue

  <template>
    <div class="father">
      <grandson/>
      <h1>子组件修改父组件的名字： {{name}}</h1>
      <button @click="mutateHandler"> Button </button>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {
         name: '张三'
       }
     },
     methods: {
       getMessage(e) {
         this.name = e;
       },
       mutateHandler() {
         this.$children[0].mutateName("张四")
       }
     }
   }
  </script>
  • grandson.vue

  <template>
    <div class="grandson">
      <button @click="sendMessage"> Button </button>
      <h1>父组件修改子组件的名字： {{name}}</h1>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {
         name: "张四"
       }
     },
     methods：{
        sendMessage() {
          this.$parents.getMessage("李四")
        },
        mutateName(e) {
          this.name = e
        }
     }
   }
  </script>

8：refs(可以获取组件对象，也可以获取dom对象)

  • father.vue

  <template>
    <div class="father">
      <grandson refs="son"/>
      <button @click="mutateHandler">修改值</button>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {
         name: '张三'
       }
     },
     methods: {
       mutateHandler() {
         this.$refs.son.mutateName("张四")
       }
     }
   }
  </script>
  • grandson.vue

  <template>
    <div class="grandson">
      <h1>父组件修改子组件的名字： {{name}}</h1>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {
         name: "张三"
       }
     },
     methods：{
        mutateName(e) {
          this.name = e
        }
     }
   }
  </script>

9：作用域插槽传值 (借助 v-slot:default="value" 实现所谓的子父传值)

  • father.vue

  <template>
    <div class="father">
      <grandson>
      <!-- 可以使用 v-slot:grandson ="{}" 是#grandson的语法糖，slot-scoped="{}" 在vue 2.6.0 起被废弃，所以我就不写了 -->
       <template #grandson="{name}">
          {{name}}
       </template>
      </grandson>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {}
     },
     methods: {}
   }
  </script>
  • grandson.vue

  <template>
    <div class="grandson">
      <slot name="grandson" :name="name"></slot>
      <button @click="mutateHandler">修改父组件值</button>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {
         name: "张三"
       }
     },
     methods：{
       mutateHandler() {
         this.name = "李四"
       }
     }
   }
  </script>

10：本地缓存(localStorage或者sessionStorage,本文我就以localStorage为例)

  • father.vue

  <template>
    <div class="father">
      <grandson></grandson>
      <h1>{{name}}</h1>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {}
     },
     methods: {},
     mounted() {
       this.name = localStorage.getItem("name")
     }
   }
  </script>
  • grandson.vue

  <template>
    <div class="grandson">
      <slot name="grandson" :name="name"></slot>
      <button @click="mutateHandler">修改父组件值</button>
    </div>
  </template>
  <script>
   export default {
     data() {
       return {
         name: "张三"
       }
     },
     methods：{
       mutateHandler() {
         this.name = "李四
         localStorage.setItem("name",this.name)
       }
     }
   }
  </script>

11：vuex (一般我们就是dispatch这个actions名字，然后action提交mutations这个名字，然后getters获取这个state(getters类似于vue中的computed),这里我使用的vuex的辅助函数)

  • store.js

 import Vue from 'vue'
 import Vuex from 'vuex'

 Vue.use(Vuex)

 export default new Vuex.Store({
   state: {
     name: '张三'
   },
   mutations: {
     setName(state,name) {
       state.name = name
     }
   },
   actions: {
     actionName({commit}) {
       commit("setName",name)
     }
   },
   getters: {
     name(state) {
       return state.state
     }
   },
   modules: {

   }
 })
  • main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount("#app")
  • father.vue

  <template>
    <div class="father">
      <grandson></grandson>
      <h1>{{name}}</h1>
    </div>
  </template>
  <script>
    import { mapGetters } from 'vuex'
   export default {
     data() {
       return {}
     },
     computed: mapGetters(["name"]),
   }
  </script>
  • grandson.vue

  <template>
    <div class="grandson">
      <button @click="actionName(name)">修改父组件值</button>
    </div>
  </template>
  <script>
   import { mapActions } from 'vuex'
   export default {
     data() {
       return {
         name: "张三"
       }
     },
     methods：{
       ...mapActions(["actionName"]),
     }
   }
  </script>

12： redux（这里我就不写了，原理类似于vuex）

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue组件通信
    vue中组件之间的通信 组件可以有以下几种关系： A-B、B-C、B-D都是父子关系 C-D是兄弟关系 A-C、A...
    叶落疑秋阅读 110评论 0赞 2
  • vue 组件通信
    组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一...
    虚竹_d36e阅读 216评论 0赞 0
  • 8种vue组件通信方式（转载）
    本篇文章带大家详细了解一下vue中8种组件通信方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助...
    浅浅而谈阅读 2,226评论 2赞 50
  • 8种vue组件通信方式
    vue是数据驱动视图更新的框架，所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？ 首...
    小太阳可可阅读 252评论 0赞 0
  • VUE组件通信方式
    前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引...
    戚子宇阅读 1,066评论 0赞 0