Props

Props란

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있도록 도와주는 사용자 정의 속성

Props 선언

• 문자열 배열로 선언

export default {
  props: ['title'],
  setup(props) {
    console.log(props.title)
  }
}

• 객체문법 선언

export default {
  props: {
    title: String,
    likes: Number
  },
	setup(props) {
		console.log(props.title)
		console.log(props.likes)
	}
}

• 객체문법 선언에서 value에 객체 선언

  props: {
    type: {
      type: String,
      default: "news",
      validator: (value) => {
        return ["news", "notice"].includes(value);
      },
    },
    title: {
      type: String,
      required: true,
    },
    contents: {
      type: String,
      required: true,
    },
    isLike: {
      type: Boolean,
      default: false,
    },
    obj: {
      type: Object,
      default: () => ({}),
    },
  },

Props사용

• 선언된 props를 <template> 에서 바로 사용
• setup()의 첫번재 매개변수로 props객체를 받아서 사용

  setup(props) {
    const isLikeClass = computed(() =>
      props.isLike ? "btn-danger" : "btn-outline-danger"
    );
    const typeName = computed(() =>
      props.type === "news" ? "뉴스" : "공지사항"
    );
    // const toggleLike = () => {
    //   props.isLike = !props.isLike;
    // };
    return { isLikeClass, typeName };
  },