vue属性不是传递给儿童组件的

发布于 2025-01-31 07:08:32 字数 513 浏览 0 评论 0原文

我无法使它起作用似乎很荒谬，但是当将道具传递给子部门时，道具的价值永远不会改变，而disablefootertext始终是错误的。我做错了吗？

父母：

<MyChildComponent :disableFooterText="true">

孩子：

<MyCustomDropdown :footerText="footerText">

props: {
  disableFooterText: {
    default: false,
    type: Boolean
  },
}

computed: {
  footerText() {
    if (this.disableFooterText) { // always false
      return '';
    }
    return 'Lorem impsum';    // always returns this value
  },
}

原文

It seems ridiculous that I can't get this to work, but when passing a prop to a child component, the value of the prop never actually changes and disableFooterText is always false. Am I doing something wrong?

Parent:

<MyChildComponent :disableFooterText="true">

Child:

<MyCustomDropdown :footerText="footerText">

props: {
  disableFooterText: {
    default: false,
    type: Boolean
  },
}

computed: {
  footerText() {
    if (this.disableFooterText) { // always false
      return '';
    }
    return 'Lorem impsum';    // always returns this value
  },
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

琴流音 2025-02-07 07:08:32

尝试使用kebab-case prop：

const app = Vue.createApp({})

app.component('my-child-component', {
  template: `
    <div>
      <p>{{numResultsText}}</p>
    </div>
  `,
  props: {
    disableFooterText: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    numResultsText() {
      if (this.disableFooterText) { // always false
        return this.disableFooterText;
      }
      return 'Lorem impsum';    // always returns this value
    },
  },
})

app.mount('#demo')

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
   <my-child-component :disable-footer-text="true" />
</div>

Try with kebab-case prop:

const app = Vue.createApp({})

app.component('my-child-component', {
  template: `
    <div>
      <p>{{numResultsText}}</p>
    </div>
  `,
  props: {
    disableFooterText: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    numResultsText() {
      if (this.disableFooterText) { // always false
        return this.disableFooterText;
      }
      return 'Lorem impsum';    // always returns this value
    },
  },
})

app.mount('#demo')

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
   <my-child-component :disable-footer-text="true" />
</div>

回复收藏 0 原文