Question

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

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

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

prop默认类型
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。

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>

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

1 个答案: