Custom내 자신의 지시문 ( v-color)을 사용하는 구성 요소 가 있습니다 .
<custom v-color="color" />
그리고 내가 정의하는 내 스크립트 this.color와 this.changeColor():
{
data () {
return {
color: red
}
},
methods: {
changeColor (color) {
this.color = color
}
}
}
어떻게의 코드를 쓸 수 v-color변화에 지침을 v-bind:color의 <custom />?
즉,의 값은 구성 요소가로드 v-bind:color될 red때입니다. 경우 this.color방법 (예 :로 변경된다 this.changeColor('blue'))의 값을 v-bind:color자동으로 업데이트 할 것이다.
v-color여러 번 사용할 것이기 때문에 "시계"를 피하는 솔루션을 고맙게 생각합니다 .
이와 같은 것이 당신이 찾고있는 것에 맞는 것 같습니다 :
Vue.component('third-party-component', {
props: ['color'],
template: '<div :style="{ color }" v-cloak>{{color}}</div>'
});
Vue.component('hoc-component', {
props: ['color'],
computed: {
transformedColor () {
if (this.color === "blu") return "blue";
if (this.color === "re") return "red";
if (this.color == "or") return "orange";
if (this.color == "pur") return "purple";
return this.color;
}
},
template: '<third-party-component :color="transformedColor" />'
});
new Vue({
el: '#app'
});<html>
<body>
<div id="app" v-cloak>
<div>
<hoc-component color="blu"></hoc-component>
<hoc-component color="or"></hoc-component>
<hoc-component color="re"></hoc-component>
<hoc-component color="pur"></hoc-component>
<hoc-component color="pink"></hoc-component>
<hoc-component color="green"></hoc-component>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</body>
</html>여기에서는 필요한 데이터를 수정하고 타사 구성 요소에 전달하기 위해 Higher Order Component 패턴을 활용합니다. 이는 지시문의 부작용없이 데이터 변경을 변경하고 처리하는 훨씬 더 효과적인 방법입니다.
도움이 되었기를 바랍니다!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다