이것은 아마도 Svelte.js가 작동하는 방식 일 수 있지만 내가 뭔가 잘못하고 있는지 또는 해결 방법이 있는지 궁금합니다.
컴파일러 옵션을 설정 customElement: true하면 구성 요소에 전달 된 속성을 <script>해당 구성 요소 내의 태그에서 사용할 수 없습니다 . 나는 svelte-loader와 함께 webpack을 사용합니다. 다음은 간단한 예입니다.
// index.html
<my-app foo="testing svelte"></my-app>
<script src="bundle.js"></script>
// script.js (bundled into bundle.js)
import App from './App.svelte';
customElements.define('my-app', App);
// App.svelte
<script>
export let foo;
console.log(foo); // undefined
$: bar = foo.toUpperCase(); // Cannot read property 'toUpperCase' of undefined
$: qux = String(foo).toUpperCase(); // No error, works
</script>
{ foo } // testing svelte - works, as expected
{ qux } // TESTING SVELTE - works, as expected
또한가 customElement: true설정되어 있지 않고 프레임 워크가 const app = new App(...)생성자 로 인스턴스화 console.log(foo)되면 $: bar = foo.toUpperCase().
Svelte가 왜 이런 식으로 작동하는지 설명 할 수 있습니까? 고마워, 건배!
사용자 정의 요소를 사용하면 소품이 생성자에서 전달되지 않고 나중에 구성 요소 인스턴스에서 설정됩니다.
내 말은, 사용자 정의 요소를 사용하면 개념적으로 표준 구성 요소를 사용하는 것과 같습니다.
const app = new App({ target })
app.$set({ foo: 'bar' })
하지 그:
const app = new App({ target, props: { foo: 'bar' } })
이것이 값이 처음에는 console.log정의되지 않았지만 여전히 마크 업에 예상대로 표시되는 이유 입니다.
그 이유는 Svelte 구성 요소의 init 함수 (즉, <script>구성 요소 의 태그 내용 )가 구성 요소 생성자에서 동 기적으로 호출되기 때문입니다 (즉, new App(...)). 그러나이 시점에서 요소의 속성을 사용할 수 없습니다 ( 이 답변 에 따라 ).
소품에 기본값을 제공하거나 사용하기 전에 확인하십시오 ...
<script>
// default value
export let name = ''
// ... or sanity check
export let other
$: otherName = other != null ? other + name : null
<script>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다