Question

我有 SceneList 和 SceneCard 组件。我在SceneList中随机设置 SceneCard bg-color。我想将颜色代码传递给 SceneCard 。但我得到：指令彩虹绑定钩子错误：＆＃34; TypeError：无法设置属性＆＃39; bgcolor＆＃39;未定义＆＃34; 。有人可以说明如何在自定义指令中正确设置数据吗？

这是我的代码：

SceneList：

<template>
  <div id="scene-list">
    <scene-card
      class="scene-card-comp"
      v-for="scene in scenes"
      :key="scene.id"
      :bgcolor="bgcolor"
      v-rainbow>

    </scene-card>
  </div>
</template>

<script>
import SceneCard from './SceneCard.vue';
export default {
  props: ['scenes'],

  components: {
    SceneCard
  },

  data() {
    return {
      bgcolor: null
    };
  },

  directives: {
    rainbow: {
      bind(el, /* binding, vnode */) {
        const bgColor = `#${Math.random().toString().slice(2, 8)}`;
        el.style.backgroundColor = bgColor;
        this.bgcolor = bgColor;
        el.style.opacity = '0.5';
      }
    }
  }
};
</script>

<style lang="less">
...
</style>

SceneCard：

<template>
  <div id="scene-card" @click="changeBGColor">

  </div>
</template>

<script>
export default {
  props: ['bgcolor'],

  data() {
    return {

    };
  },

  methods: {
    changeBGColor() {
      console.log('bgcolor change ', this.bgcolor);
    }
  },
};
</script>

Answer 1

您可以使用el更改组件的属性，如果您使用this，则不会引用该组件。

el根据文档（https://vuejs.org/v2/guide/custom-directive.html）

引用HTML DOM和组件

    rainbow: {
        bind(el, /* binding, vnode */) {
            const bgColor =`#${Math.random().toString().slice(2, 8)}`;
            el.style.backgroundColor = bgColor;
            el.bgcolor = bgColor;
            el.style.opacity = '0.5';
           }
        }

Vue：是否可以在自定义指令中设置数据变量

1 个答案: