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>ここでは、必要なデータを変更してサードパーティコンポーネントに渡すために、高次コンポーネントパターンを利用しています。これは、ディレクティブの副作用なしにデータ変更を変更および処理するためのはるかに効果的な方法です。
お役に立てれば！
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加