vue3语法糖中子组件如何直接调用父组件的属性和方法

在Vue3中，可以使用`$attrs`和`$emit`来实现子组件直接调用父组件的属性和方法。具体来说，`$attrs`可以获取父组件传递给子组件的所有属性，而`$emit`可以触发父组件中的自定义事件，并且可以传递参数。

例如，在父组件中定义一个属性和一个方法：

<template>
  <child-component :message="message" @update-message="updateMessage"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

然后在子组件中，可以通过`$attrs`获取父组件传递的属性，并且通过`$emit`触发父组件中的自定义事件：

<template>
  <div>
    <p>{{ $attrs.message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New Message')
    }
  }
}
</script>

这样，当点击子组件中的按钮时，就会触发父组件中的`updateMessage`方法，并且将参数传递给它。