Example: What are the setup parameters attrs, slots, and emit in vue3?

I read the document many times, but still couldn’t figure out what these were, so I manually wrote an example to help me understand:

home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" proper="1" @custome="handler">
      <template v-slot:one> {{ home }} - 子组件插槽的数据： </template>
    </HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  data() {
    return {
      home: "主页",
    };
  },
  components: { HelloWorld },
  methods: {
    handler(args) {
      console.log("子组件传递的参数：", args);
    },
  },
};
</script>

Helloworld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <span>这里是插槽内容：</span>
    <slot slotone="01" name="one"></slot>
    <slot slottwo="02" name="two"></slot>
    <hr />

    <button @click="$emit(&#39;custome&#39;, &#39;参数&#39;)">点击传递参数</button>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup(props, context) {
    console.log("props:", props);
    console.log("context:", context);
    const { attrs, slots, emit } = context;
    console.log("attrs:", attrs);
    console.log("slots:", slots);
    console.log("emit:", emit);
  },
};
</script>

Console output:

props: Proxy {msg: "Welcome to Your Vue.js App"}
context: {expose: ƒ}
attrs: Proxy {proper: "1", __vInternal: 1, onCustome: ƒ}
slots: Proxy {_: 1, __vInternal: 1, one: ƒ}
emit: (event, ...args) => instance.emit(event, ...args)

Continue to expand:

Combining the circled parts in the picture, I probably have Conclusion

• contextContext here should refer to the helloworld component

• attrs is the component. $attrs (does not contain props, but contains function methods)

• slots is the component slot, and it is a "used" slot, because the other slot "two" does not have a corresponding template rendering

• emitIt feels like it is a component What exactly are custom events? However, you can't actually get anything from the console output here.

I would like to know whether the above four conclusions are understood correctly.

is roughly correct. There is only a slight problem with the first point. context is not the real object of this component. It is just a thing that brings part of the information when setup is executed. setup This component object has not yet been created.

I don’t know if the questioner has ever been exposed to the Options API writing method of Vue2 or Vue3 before. If you come up directly, the Vue3 Composition API is really not easy to understand.

The last three are actually this.$attrs, this.$slots, this.$emit in the Options API, because ## There was no this when #setup, so it was written like this.

[Related recommendations:

vue.js video tutorial]

The above is the detailed content of Example: What are the setup parameters attrs, slots, and emit in vue3?. For more information, please follow other related articles on the PHP Chinese website!