vue 爷孙组件消息传递之 $attr

最新推荐文章于 2024-04-30 10:40:48 发布

suzyCai

最新推荐文章于 2024-04-30 10:40:48 发布

阅读量371

点赞数 6

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42080477/article/details/135200546

版权

在这里插入图片描述

爷爷组件

<template>
  <h1>爷爷组件</h1>
  <div style="border: 1px solid red;">孙子传来的数据：{{ fromSunData  }}</div>
  <Fu ye-color="爷-yellow" ye-name="爷-电脑" @fromSun="fromSun" />
</template>

<script>
import Fu from './components/Fu.vue'

export default {
  name: 'App',
  components: {
    Fu
  },
  data() {
    return {
      fromSunData: "XXX",
    };
  },
  methods:{
    fromSun(payload) {
      console.log("孙传祖", payload);
      this.fromSunData = payload;
    },
  }
}
</script>

父亲组件<

<template>
  <div class="hello">
  <h1>父亲组件</h1>
   
    <div style="border: 1px solid pink;">爷爷组件传来的数据： {{ $attrs}}</div>
    <Sun fu-color="父-red" fu-name="父-手机"  v-bind="$attrs" ></Sun>
  </div>
</template>

<script>
import Sun from './Sun.vue'

export default {
  name: 'FuOne',
  components: {
    Sun
  },
  props: {
    msg: String
  }
}
</script>

孙子组件

<template>
<div>
  <h1>孙子组件</h1>
  <div style="border: 1px solid yellow;">父亲组件传来的数据： {{ $attrs}}</div>
  <button  @click="sendToZu">孙传祖</button>

  </div>
</template>

<script>
export default {
  // inheritAttrs: false,
  name: 'SunTwo',
  data(){
    return {
    }
  },
  methods: {
    sendToZu() {
      // 孙组件能够触发爷组件的fromSun方法的原因还是因为父组件中有一个$listeners作为中间人，去转发这个事件的触发
      this.$emit("fromSun", '我想买电脑');
    },
  },
  
}
</script>

<style scoped>

</style>