如何更改vue-cookie-law默认道具

Question

我试图用道具更改组件vue-cookie-law的buttonText默认值。

我可以直接从node_modules插件源代码中更改默认值，但我想从Vue单文件组件中更改它。

vue-cookie-law - https://www.npmjs.com/package/vue-cookie-law

支柱默认类型

buttonText：“明白了！”

由于我以前没有使用过道具，所以我尝试了一些东西，下面是我的CookieLaw.vue组件

<template>
  <footer>
    <cookie-law theme="base">
      <div slot="message">
        We use cookies to enhance your experience. By continuing to visit our site you agree to our use of cookies.
        <router-link to="terms_and_conditions">View Policy</router-link>
      </div>
    </cookie-law>
  </footer>
</template>

<script>
import CookieLaw from "vue-cookie-law";

export default {
  props: {
    buttonText: {
      default: "Agree"
    }
  },
  components: { CookieLaw }
};
</script>

道具不会改变buttonText的默认设置。

Answer 1

如您所知，buttonText是vue-cookie-law组件的默认支持之一.而不是父组件(导入它的父组件)，所以必须将它们绑定到组件本身：

  <cookie-law theme="base" buttonText="Agree">
       ...
  </cookie-law>

或绑定动态值：

<script>
  import CookieLaw from "vue-cookie-law";

export default {
  data() {
    return {
      text: 'Agree'
    }
  }
  components: {
    CookieLaw
  }
}; <
</script>

<cookie-law theme="base" :buttonText="text">
  ...
</cookie-law>