Question

我使用自己的指令（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的{{1}}？

换句话说，加载组件时，<custom />的值为v-bind:color。如果red被某个方法（例如this.color）修改，则this.changeColor('blue')的值将被自动更新。

我希望避免使用“监视”解决方案，因为我会多次使用v-bind:color。

Answer 1

类似这样的东西似乎符合您的需求：

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>

在这里，我们利用“高阶组件”模式来修改所需的数据并将其传递给第三方组件。这是一种更有效的变异和处理数据更改的方式，而不会产生指令带来的副作用。

希望这会有所帮助！

Vue.js使用自定义指令添加组件选项（prop）

1 个答案: