예: vue3의 설정 매개변수 attrs, Slots 및 Emit은 무엇입니까?

문서를 여러 번 읽었지만 여전히 이것이 무엇인지 알 수 없었기 때문에 이해를 돕기 위해 수동으로 예제를 작성했습니다:

home.vuehome.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>

控制台输出：

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)

继续展开：

结合图里面圈起来的部分，我大概得出的结论

• context上下文这里应该是指helloworld这个组件

• attrs也就组件的是那个$attrs(不含props,但是包含函数方法)

• slots是组件插槽，并且是有被“使用”的插槽，因为另外一个插槽"two"没有对应的模板渲染

• emit感觉是组件的自定义事件到底是什么呢？但是，这里看控制台输出实际上也得不出什么内容。

想知道以上4条结论理解是否正确。

大致是对的。唯有第一点稍稍有点儿问题，context 不是这个组件的真正对象，只是在 setup 时带了其中一部分信息的玩意儿，执行 setup 时这个组件对象还没被创建出来呢。

不知道题主以前接没接触过 Vue2 或者 Vue3 的 Options API 写法，要是直接上来就是 Vue3 Composition API 确实不太容易理解。

后面仨其实就是 Options API 里的 this.$attrs、this.$slots、this.$emit，因为 setup 时还没有 thisrrreee

Helloworld. vue

rrreee콘솔 출력: rrreee

계속 확장:

사진 속 동그라미 부분을 보고 대충 결론을 내렸습니다🎜

• 🎜 컨텍스트여기서 컨텍스트는 helloworld🎜
• 🎜attrs 구성요소를 참조해야 합니다. 즉, 구성요소는 다음과 같습니다. $attrs code>(props는 포함하지 않지만 함수 메서드는 포함)🎜
• 🎜slots는 구성 요소 슬롯이며 "사용된" 것입니다. 슬롯이 하나 더 있어서 슬롯 "2"에는 해당 템플릿 렌더링이 없습니다🎜
• 🎜emit컴포넌트의 맞춤 이벤트가 무엇인지 같은 느낌이 드나요? 그러나 실제로 여기 콘솔 출력에서는 아무것도 얻을 수 없습니다. 🎜

🎜위의 네 가지 결론이 올바르게 이해되었는지 알고 싶습니다. 🎜🎜절대 그렇습니다. 첫 번째 점만 약간 문제가 있습니다. context는 setup이 실행될 때 정보의 일부를 가져오는 것일 뿐입니다. >setup 이 구성 요소 개체는 아직 생성되지 않았습니다. 🎜🎜질문하시는 분이 이전에 Vue2나 Vue3의 Options API 작성 방식을 접해본 적이 있는지 모르겠습니다. 직접 들어보면 Vue3 Composition API는 정말 이해하기 쉽지 않습니다. 🎜🎜다음 세 개는 실제로 옵션 API의 this.$attrs, this.$slots 및 this.$emit입니다. code> 설정시 이것이 없어서 이렇게 작성했습니다. 🎜🎜【관련 추천: 🎜vue.js 동영상 튜토리얼🎜】🎜

위 내용은 예: vue3의 설정 매개변수 attrs, Slots 및 Emit은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!