vue props 전송 Array/Object 형식 값,하위 구성 요소 오류 해결

1709 단어 vuepropsArrayObject
질문:
Props with type Object/Array must use a factory function to return the default value.
1.vue 에서 부모 구성 요소 가 props 를 통 해 Array/Object 형식 값 을 하위 구성 요소 에 전달 할 때
2.하위 구성 요소 의 props 가 default 를 받 으 면 다음 과 같 습 니 다.

잘못 을 보고 하 다

원인:props default 배열/대상 의 기본 값 은 공장 함수 에서 되 돌아 와 야 합 니 다.
해결:

vue 의 props 는 여러 개의 인 자 를 어떻게 전달 합 니까?
vue 부모 역할 도 메 인 은 데 이 터 를 하위 구성 요소 에 전달 합 니 다.props 를 통 해 파 라 메 터 를 전달 하려 면 여러 개의 파 라 메 터 를 배열 형식 으로 props 에 할당 할 수 있 습 니 다.이 구성 요 소 를 통 해 부모 구성 요소 가 전달 하 는 여러 개의 파 라 메 터 를 얻 을 수 있 습 니 다.

<div id="app">
 <ul >
 <todo-item v-for="(item,index) in arr" v-bind:todo="item" v-bind:index="index"></todo-item>
 </ul>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
    Vue.component("todo-item",{
   props:['todo','index'],
 template:"<li>{{index}}:{{todo.text}}</li>" 
 })
 var app = new Vue({
   el:"#app",
   data:{
 arr: [ { text: '   JavaScript' }, { text: '   Vue' }, { text: '     ' } ]
 }
 })
</script>
이 문 서 는 vue props 전송 Array/Object 형식 값 을 해결 합 니 다.하위 구성 요소 가 잘못 보고 한 상황 은 바로 작은 편집 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기