javascript - 如何更改 vue-cookie-law 默认 Props

Question

我正在尝试使用 Props 更改组件 vue-cookie-law 的 buttonText 默认值。

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

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

Prop 默认类型
按钮文本:“明白了!”

由于我之前没有使用过 Props，所以我一直在尝试一些东西，下面是我的 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>

这些 Prop 不会更改 buttonText 的默认值。

Answer 1

buttonText 是 vue-cookie-law 组件的默认 props 之一，如您所知......而不是父组件(您导入它的那个组件) )所以你必须将它们绑定(bind)到它本身的组件上:

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

或者绑定(bind)一个动态值:

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

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

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