attrs

attrs用于父组件与孙组件间数据交互

fathter.vue

<template>
  <div class="app-container">
    <child:msg="msg" @getMsg="sonMsg"></child>
  </div>
</template>

<script>
import childfrom './child.vue';
import {reactive, toRefs} from "vue";
export default {
  name: 'HelloA',
  components:{son},

  setup() {
    const data=reactive({
      msg:'123'
    })
    const sonMsg=(val)=>{data.msg=val}
    return {
      ...toRefs(data),
      sonMsg
    };
  }
};
</script>

child.vue

<template>
  <div>
    <grandson v-bind="attrs"></grandson>
  </div>
</template>
<script setup>
/* eslint-disable */
import {useAttrs} from "vue";
import grandson from "./grandson .vue";
const attrs=useAttrs()
</script>

grandson.vue

<template>
  <div>
    {{ msg }}
    <el-button  @click="changeMsg()">点击</el-button>
  </div>
</template>
<script>
export default {
  props: {
    msg: String
  },
  setup(props, context) {
    const changeMsg = () => {
      context.emit('getMsg','234');
    };
    return {
      changeMsg
    };
  }
};
</script>