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>
相关推荐
mCell19 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip19 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅1 天前
JavaScript 作用域
前端·javascript
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试