소품 및 데이터 중복을 방지하려면 어떻게 해야 합니까?
저는 Vue는 처음이지만 Google Polymer 2를 1년 정도 사용한 경험이 있습니다.제가 달성하려고 하는 것은 자체 가변 내부 상태를 가진 자기 완결형 컴포넌트를 구축하고, 페이지가 서버에서 브라우저로 처음 전송될 때 HTML을 통해 초기 상태로 전달하는 것입니다(즉, 단일 페이지 앱이 아닙니다).며칠 동안 소품이나 데이터를 만지작거렸습니다만, 소품을 사용하여 초기값을 전달하고 데이터 필드에 복사한 다음 데이터 필드를 변환하는 것이 합의된 것 같습니다.
하지만 이로 인해 가치가 중복됩니다!"title" 값이 있는 경우, 컴포넌트 내에서 타이틀의 변환을 자급자족하려면 해당 값에 대한 프로포트와 데이터가 모두 필요합니다(입력된 값을 먼저 처리해야 하는 등의 이유로 단순히 입력 상자에 바인드할 수 없습니다).타이틀 데이터 필드를 변환하면, 지금은 쓸모없는 타이틀 소품들이 아직도 코드 냄새처럼 맴돈다.
이런 정보의 중복을 피할 수 있는 방법이 있을까요?아니면 Vue를 사용할 때 감수해야 하는 건가요?아니면 Vue 컴포넌트가 모두 잘못된 것일까요?
추신. 저는 여러 가지 시도를 해봤습니다..sync,$emit부모 컴포넌트의 데이터 필드를 변환하는 데 매우 적합합니다.그러나 내부 상태 변경을 듣고 JS 기반 작업을 수행한 다음 위의 복제 문제 없이 상태의 단일 복사본을 업데이트할 수 있는 단일 구성 요소가 필요합니다.
편집: 요청에 따라 동작하는 코드의 간단한 예를 다음에 나타냅니다(커스텀 요소 확장을 사용하고 있지만 핵심 문제에 영향을 주지 않는 것 같습니다).그래서 궁금한 것은 어떻게 하면 중복을 제거할 수 있는가 하는 것입니다.title그리고.data_title?
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./vue-custom-element.js"></script>
</head>
<body>
<my-element title="an old title"></my-element>
<script type="application/javascript">
Vue.customElement('my-element', {
props: [
'title'
],
data() {
return {
data_title: this.title
};
},
template: `<p @click="handleClick('a new title')">My element's title: <b>{{data_title}}</b></p>`,
methods: {
handleClick: function(newTitle) {
// realistically we would do some work here before setting the new value
this.data_title = newTitle;
}
}
});
</script>
</body>
</html>
구성 요소를 수정할 수 있는 공용 속성(부모가 값을 전달할 수 있는 속성)이 필요한 경우 중복을 피할 수 없습니다.변종에게는 필요악이다.propsVue 컴포넌트에 있습니다.
언급URL : https://stackoverflow.com/questions/54703016/how-to-avoid-data-duplication-in-props-and-data
'source' 카테고리의 다른 글
| Spring Security 5 : ID "null"에 매핑된 PasswordEncoder가 없습니다. (0) | 2022.09.03 |
|---|---|
| 여러 키를 사용하여 맵을 구현하는 방법 (0) | 2022.09.03 |
| Java에서의 정적 할당 - 힙, 스택 및 영구 생성 (0) | 2022.09.03 |
| python 확장 - swig 또는 Cython이 아닌 swig로 확장 (0) | 2022.09.03 |
| javascript에서 . (dot)를 숫자와 연결하는 방법 (0) | 2022.09.01 |