vue中inheritAttrs、$attrs与$listners的使用

mxlWhb

已于 2022-07-13 10:51:52 修改

阅读量132

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-07-13 10:50:09 首次发布

原文链接：https://blog.csdn.net/qq_42859450/article/details/125759240?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125759240%22%2C%22source%22%3A%22qq_42859450%22%7D&ctrtid=28q9l

版权

vue 专栏收录该内容

88 篇文章 4 订阅

订阅专栏

在这里插入图片描述

<template>
  <div class="hello">
    <div>祖父组件</div>
    <father :message="message" @getSonMessage="getSonMessage"></father>
    <div>{{sonMessage.title}}__{{sonMessage.tip}}</div>
  </div>
</template>
<script>
import father from "./father.vue";
export default {
  name: "home",
  components: {
    father,
  },
  data() {
    return {
      message:{ title: "祖父组件数据",tip:"来自父组件"},
      sonMessage:""
    };
  },
  methods: {
    getSonMessage(val){
      this.sonMessage = val
    }
  },
};
</script>

<template>
  <div>
    <div>父亲组件</div>
    <son v-bind="$attrs" v-on="$listeners"></son>
  </div>
</template>

<script>
import son from "./son.vue";
export default {
  inheritAttrs:true,
  name: "father",
  components: {
    son,
  },
  created(){
    console.log(this.$attrs,"attrs")
  }
};
</script>

<style>
</style>

<template>
  <div>
    <div>孙子组件</div>
    <div>{{message.title}}--{{message.tip}}</div>
    <button @click="sendMessage">发送数据</button>
  </div>
</template>
<script>
export default {
  name: "son",
  props:['message'],
  data(){
    return{
      sonMessage:{title:"孙子数据",tip:"来自孙子数据"}
    }
  },
  created() {},
  methods: {
    sendMessage(){
      this.$emit('getSonMessage',this.sonMessage)
    }
  },
};
</script>