vue组件间通信方式

Posted 2021-07-26 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组件间通信方式的主要内容，如果未能解决你的问题，请参考以下文章