Vue中的的通信方式有几种?隔代组件的通信你用那种方式解决?

props/$emit ``适用父子组件通信

ref与parent/children``适用父子组件通信

attrs/listeners,provide/inject`` 适用于隔代组件通信

vuex,EventBus``(事件总线) 适用于父子、隔代、兄弟组件通信

slot``插槽方式

attrs实例

父组件(这时候我们传了两个参数title和type)

javascript 复制代码
<template>
  <div>
    <div class="father">我是父组件,点击传值给孙子组件</div>
    <child :title="title" :type="type" />
  </div>
</template>
<script>
import child from "./components/child";
export default {
  components: {
    child
  },
  data() {
    return {
      title: "",
      type: ""
    };
  },
  methods: {}
};
</script>

子组件(注意:子组件使用了title,那么孙子组件就拿不到title值。)

javascript 复制代码
<template>
  <div>
    <div class="child">
      <div>我是子组件{{title}}</div>
    </div>
    <grandson v-bind="$attrs" />
  </div>
</template>
<script>
import grandson from "./grandson";

export default {
  components: {
    grandson
  },
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  watch: {
    $attrs() {
      console.log(this.$attrs, "attrs");
    },
  },
  data() {}
};
</script>

孙子组件(该组件只能显示type)

javascript 复制代码
<template>
  <div>
    <div class="grandson">我是孙子组件{{title}}{{type}}</div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ""
    }
  },
  watch: {
    title() {
      console.log(this.title, "=====孙子组件");
    },
    type() {
      console.log(this.type, "=====孙子组件");
    }
  },
  data() {
    return {};
  }
};
</script>
相关推荐
daols887 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06279 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台9 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴10 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust10 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放10 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝12 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele12 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试