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>
相关推荐
用户38022585982416 分钟前
vue3源码解析:依赖收集
前端·vue.js
用户75794199497016 分钟前
基于JavaScript的简易Git
javascript
gzzeason19 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77820 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽39 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
自由逐风40 分钟前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子41 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
云动雨颤44 分钟前
流量分发代码实战|学会用JS控制用户访问路径
javascript
wzyoung1 小时前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
gnip1 小时前
项目开发流程之技术调用流程
前端·javascript