Vuejs 컴포넌트 소품 스트링

Vuejs 컴포넌트 소품 스트링

이 소품을 문자열로 전달합니다.

<list-view :avatar="pictures"></list-view>

그러나 Vue는 다음과 같은 경고를 받기 때문에 메서드를 호출하려고 한다고 생각합니다.

[Vue warn] :속성 또는 메서드 "그림"은 인스턴스에서 정의되지 않고 렌더링 중에 참조됩니다.데이터 옵션에서 비활성 데이터 속성을 선언하십시오.

[Vue warn] :잘못된 소품: 소품 "아바타"에 대한 형식 검사에 실패했습니다.문자열이 필요한데 정의되지 않았습니다.

어떻게 통과해?"pictures"끈으로요?

Vue.component('list-view', {
  props: {
    avatar: { type: String, required: true },
  },
  template: `<div>{{ avatar }}</div>`,
});

var app = new Vue({ el: '#app' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <list-view :avatar="pictures" ></list-view>
</div>

현재 Vue는 다음과 같은 변수를 찾고 있습니다.pictures하위 구성요소에 속성 값으로 전달합니다.

해당 인라인 식에서 문자열 값을 지정할 경우 값을 따옴표로 감싸 문자열로 만들 수 있습니다.

<list-view :avatar="'pictures'"></list-view>

---

또는 @Zunnii가 다음과 같이 대답했듯이 전달되는 값이 실제로는 정적 문자열일 경우 단순히 생략할 수 있습니다.v-bind콜론 줄임말:

<list-view avatar="pictures"></list-view>

이렇게 하면avatar하위 구성 요소의 프로포트에 문자열 값이 할당됩니다."pictures".

정적 문자열을 전달하려면 v-bind 없이 문자열을 직접 전달하면 됩니다.

<div id="app">
   <greeting text="world"></greeting>
</div>

JS 파일에서

Vue.component('greeting', {
    props: ['text'],
  template: '<h1>Hello {{ text  }}!</h1>'
});


var vm = new Vue({
  el: '#app'
});

JSFiddle => https://jsfiddle.net/dpLp4jk8/

라라벨에서는 아래와 같이 스트링을 전달할 수 있습니다.

function authUserCurrency(){
    return '$';
}
<service :authusercurrency="'{!!authUserCurrency()!!}'"></services>

Vue.js 템플릿

props:{authusercurrency:String}, 

또는

 props:['authUserCurrency'],

:avatar="pictures"  //vue treat pictures as a variable or computed properties

기본적으로 vue는 사진을 변수 또는 계산된 속성으로 처리하고 로컬에서 검색하며 오류를 검색하지 않습니다.따라서 변수나 계산된 속성이 아닌 문자열임을 외부에 알려야 합니다.따옴표로 묶으세요.

:avatar="'pictures'" // I guess it will work

이 경우 동적 속성 값과 함께 정적 문자열을 전달해야 했습니다.아래와 같이 했다.

<home-card :title="'By' + post.author.name "></home-card> 

언급URL : https://stackoverflow.com/questions/45175527/vuejs-component-props-as-string