时间戳

首页 > 解决方案 > 如何更改 vue-cookie-law 默认 Props

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

问题描述

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

我可以直接从 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.

标签： javascripthtmlvue.js

解决方案

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>

推荐阅读