Vue3에서 SetUp 함수의 props 및 컨텍스트 매개변수를 사용하는 방법

1. setUp 함수의 첫 번째 매개변수 props

setup(props,context){}

첫 번째 매개변수 props:

props는 상위 구성 요소에서 하위 구성 요소로 전달된 모든 데이터를 포함하는 객체입니다. 요소.

하위 컴포넌트의 소품을 사용하여 수신하세요.

구성에 의해 선언되고 전달된 모든 속성을 포함하는 개체

즉, 상위 구성 요소에서 전달된 값을 props를 통해 하위 구성 요소에 출력하려는 ​​경우입니다.

구성을 수신하려면 props를 사용해야 합니다. 즉, props:{......}

Props를 통해 구성을 허용하지 않으면 출력 값이 정의되지 않습니다.

<template>
  <div>
    父组件 
  </div>
  <no-cont :mytitle="msg" 
      othertitle="别人的标题"
      @sonclick="sonclick">
  </no-cont>
</template>

<script>
import NoCont from "../components/NoCont.vue"
export default {
  setup () {
    let msg={
      title:"父组件给子给子组件的数据"
    }
    function sonclick(msss:string){
      console.log(msss)
    }
    return {msg,sonclick}
  },
  components:{
    NoCont
  }
}
</script>

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
 //  未进行接受
 //   props:{
 //     mytitle:{
 //         type:Object
 //     }
 //   },
  setup(props,context){
    console.log("props==>",props.mytitle);//输出的值是 undefined
    function sonHander(){
        context.emit("sonclick","子组件传递给父组件")
    }
    return {sonHander}
  }
});
</script>

props.mytitle을 통해 출력되는 값이 왜 정의되지 않습니까?

구성 수신을 위한 props를 사용하지 않았기 때문입니다. 즉,

props:{
    mytitle:{
        type:Object
    }
},

수락 구성을 추가하면

2. 매개변수 context에 대한 설명

두 번째 매개변수인 context는 객체입니다.

attrs(현재 태그의 모든 속성을 가져오는 객체)가 있습니다

하지만 이 속성은 props에서 수신하도록 선언되지 않은 모든 객체입니다.

props를 사용하여 값을 가져오고 props에서 가져오려는 값을 선언하는 경우

Then: 얻은 값은 정의되지 않습니다

참고:

attrs는 값을 받기 위해 선언할 필요가 없습니다. 소품.

첫 번째 매개변수 props의 값은 props에서 선언되어야 합니다.

emit 이벤트 배포가 있습니다. (부모 컴포넌트에 전달할 때 이 이벤트를 사용해야 합니다.)

슬롯 슬롯이 있습니다

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    //输出{title:父组件传递的值}
    console.log("props==>",props.mytitle);
    
    // 输出别人的标题【使用context获取值，不需要使用props去接受】
    console.log("context==> ",context.attrs.othertitle);
    
    // 输出undefined，因为context不需要使用props去接受。
    console.log("contextmytitle==> ",context.attrs.mytitle);
    function sonHander(){
        context.emit("sonclick","子组件传递给父组件")
    }
    return {sonHander}
  }
});
</script>

3 . 하위 구성 요소는 상위 구성 요소 Event

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    function sonHander(){
        context.emit("sonclick","子组件传递给父组件")
    }
    return {sonHander}
  }
});
</script>

4. 이벤트 발송 최적화

두 번째 매개 변수 컨텍스트가 객체

이고 객체에 attrs, Slots, Emit

이라는 세 가지 속성이 있다는 것을 알고 있습니다. Emit을 직접 사용해도 괜찮습니다

<template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    //直接使用emit进行事件派发
    function sonHander(){
        emit("sonclick","子组件传递给父组件")
    }
    return {sonHander}
  }
});
</script>

5. 상위 컴포넌트에서 전달된 값을 가져옵니다

props 매개변수를 사용하여 값을 가져오고

attrs를 사용하여 값을 가져옵니다

<template>
<hr/>
   <h2>子组件</h2>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
    <h2>使用了props声明接收==>{{ mytitle  }}</h2> 
    <h2>使用参数attrs获取==>{{ attrs.othertitle  }}</h2> 
</template>

<script>
import { defineComponent,setup } from "vue";
export default defineComponent({
  name: "NoCont",
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    function sonHander(){
        emit("sonclick","子组件传递给父组件")
    }
    return {sonHander,attrs}
  }
});
</script>

몇 가지 참고 사항을 첨부했습니다. setup 함수를 사용할 때:

• setup 함수의 실행 시점은Create와 생성 전

• setup의 실행 시점은 생성 사이이므로 컴포넌트가 방금 생성되었고 데이터와 메소드가 초기화되지 않은 상태입니다. 아직은 데이터와 메소드를 setup에서 사용할 수 없습니다

• this in setup undefine

• setup을 가리키는 것은 동기식만 가능하고 비동기식이 아닙니다

위 내용은 Vue3에서 SetUp 함수의 props 및 컨텍스트 매개변수를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!