如何更改 vue-cookie-law 默认 Props答案

【问题标题】：How to change vue-cookie-law default Props如何更改 vue-cookie-law 默认 Props
【发布时间】：2019-12-28 21:19:53
【问题描述】：

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

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

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

道具默认类型
buttonText: '知道了！'

由于之前没有使用过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>

道具没有改变buttonText的默认值。

【问题讨论】：

标签： javascript html vue.js

【解决方案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>

【讨论】：