vue组件间通信方式

Posted 2022-12-10 web-gmy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue组件间通信方式相关的知识，希望对你有一定的参考价值。

props

Home.vue
<template>
  <div class="home">
    <!-- 父子组件 -->
    <Son v-model="lala" />
    <!-- 同步改变值 -->
    <Son :lala.sync='lala' />
  </div>
</template>

<script>
import Son from "./Son";

export default 
  name: "home",
  components: 
    Son
  ,
  data() 
    return 
      lala: 100
    ;
  ,
  created() 
    // 异步请求 不需要被监控的数据 初始化数据
  ,
  mounted() 
    // dom挂载完成 this.$el 替换el
  ,
  // beforeUpdate、updated两个合起来相当于watch
  beforeUpdate() ,
  updated() 
;
</script>

Son.vue
<template>
  <div>这是儿子组件
    <!-- value -->
    lala
    <button @click="change">点击改变</button>
  </div>
</template>

<script>
export default 
  props: 
    // value: 
    //   type: Number
    // 
    // 同步改变值
    lala: 
      type: Number
    
  ,
  methods: 
    // change() 
    //   this.$emit("input", 200);
    // 
    // 同步改变值
    change() 
      this.$emit("update:lala", 200);
    
  
;
</script>

$emit 和 $on
eventbus

main.js
// 创建一个vue实例
Vue.prototype.$bus = new Vue();

Home.vue
<script>
    export default 
  mounted() 
    // dom更新完成
    this.$nextTick(() => 
      this.$bus.$on("bus", data => 
        console.log(data);
      );
    );
  ,
;
</script>

Son.vue
<template>
  <div>
    这是儿子组件
  </div>
</template>
<script>
export default 
  mounted() 
    console.log(1);
    this.$bus.$emit("bus", 1000);
  
;
</script>

About.vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script>
export default 
  mounted() 
    // dom更新完成
    this.$nextTick(() => 
      this.$bus.$on("bus", data => 
        console.log(data);
      );
    );
  
;
</script>

vuex
refs
provide 和 inject

Home.vue
<script>
export default 
  name: "home",
  // 提供
  provide() 
    return  msg: "provide" ;
  
;
</script>

Son.vue
<template>
  <div>这是儿子组件
    msg
  </div>
</template>
<script>
export default 
  // 注入
  inject: ["msg"]
;
</script>

$attrs 和 $listeners

Home.vue
<template>
  <div class="home">
    <Son :a="[1,2,3,4]" />
  </div>
</template>

Son.vue
<template>
  <div>
    <!-- attrs如果再往下级组件传值 需要使用v-bind -->
    <GrandSon v-bind="$attrs"></GrandSon>
    <div v-for="x in $attrs.a"
         :key="x">
       x 
    </div>
  </div>
</template>
<script>
import GrandSon from "./GrandSon";
export default 
  inheritAttrs: false, // 不显示继承的attrs（在控制台Elements可以查看）
  components: 
    GrandSon
  
;
</script>

GrandSon.vue
<template>
  <div>这是孙子组件
     $attrs.a 
  </div>
</template>

Home.vue
<template>
  <div class="home">
    <Son1 :a="[1,2,3,4]"
          @c='fn' />
  </div>
</template>
<script>
import Son1 from "./Son1";
export default 
  name: "home",
  components: 
    Son1
  ,
  methods: 
    fn() 
      alert("我是fn");
    
  
;
</script>

Son1.vue
<template>
  <div>
    这是son1组件
    <button @click="$listeners.c">子组件调用父组件的fn</button>
    <!-- attrs 如果再往下级组件传值 需要使用v-bind -->
    <!-- listeners 如果再往下级组件传递方法 需要使用v-on -->
    <GrandSon v-on="$listeners"></GrandSon>
  </div>
</template>
<script>
import GrandSon from "./GrandSon";
export default 
  components: 
    GrandSon
  
;
</script>

GrandSon.vue
<template>
  <div>
    这是孙子组件
    <button @click="$listeners.c">孙子组件调用fn</button>
  </div>
</template>

$parent 和 $children

Home.vue
<template>
  <div class="home">
    <Son1 @input="changeV"
          :value='value' />
  </div>
</template>
<script>
import Son1 from "./Son1";
export default 
  name: "home",
  components: 
    Son1
  ,
  data() 
    return 
      value: 300000
    ;
  ,
  methods: 
    changeV(val) 
      this.value = val;
    ,
  
;
</script>

Son1.vue
<template>
  <div>
     value 
    这是son1组件
    <button @click="changeT">子调用父的input事件</button>
  </div>
</template>
<script>
export default 
  // props: ["value"],
  props: 
    value: 
      type: Number
    
  ,
  methods: 
    changeT() 
      // this.$parent.value = 50000;
      this.$emit("input", 50000);
    
  
;
</script>

GrandSon.vue
<template>
  <div>
    这是孙子组件
    <button @click="fn1">孙子调用爷爷的input事件</button>
  </div>
</template>
<script>
export default 
  methods: 
    fn1() 
      this.$parent.$emit("input", 700);
    
  
;
</script>

slot

以上是关于vue组件间通信方式的主要内容，如果未能解决你的问题，请参考以下文章

vue3provide和inject实现跨层级组件间通信祖孙组件

vue组件间的通信方式

Vue 组件间的通信方式

Vue 组件通信之$attrs$listeners

vue组件间通信六种方式（完整版）

vue中组件间通信的6种方式