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>
相关推荐
今天不要写bug4 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优7 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
一只小阿乐8 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
小圣贤君8 分钟前
小说写作中的时间轴管理:基于 Vue 3 的事序图技术实现
vue.js·electron·写作·甘特图·时间轴·事序图
Zz_waiting.8 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
writeone9 分钟前
9-10关于JS初学产生的问题
开发语言·javascript·ecmascript
一只小风华~12 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
索迪迈科技8 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
一朵梨花压海棠go9 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript