Vue js : Props

Vue.js

선물공룡디보 2022. 11. 7. 15:03

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

props.foo 를 사용하기 위해서는 props 를 "명시적으로" 선언을 해야 한다.

<BlogPost title="post.title" />
<BlogPost :title="post.title" />

title => 정적으로 값이 전달된다.
:title => 동적으로 값이 전달된다.

export default {
  props: ['foo'],
  created() {
    // ❌ warning, props are readonly!
    this.foo = 'bar'
  }
}

props는 단방향 바인딩을 형성한다.
부모의 data 가 변경되면 자식 컴포넌트의 props.foo가 변경 되어야한다.
그이유는 자식컴포넌트가 부모 컴포넌트의 data 값을 변경하면 데이터 흐름을 이해하기 어려워지기 때문이다.