vue.js - Vue2 : prop does not get bound

Question

注意:我是 Vue 新手，但在发布此内容之前，我已经查阅了文档并寻找其他问题。我找不到答案。我还安装了Vue开发工具来帮助调试，但无法解决这个看似简单的问题。

我想制作一个简单的 Vue 单文件组件来测试并查看我与 rollup 捆绑的设置是否有效(例如，确保我对 vue 组件作为模块和导出的理解是正确的)。

所以我的简单组件由两个较小的组件组​​成 - 一个带有向上 V 形的按钮或带有向下 V 形的按钮。我们的想法是让它位于页面中间，然后单击移动到下一个 section 标记。

到目前为止，我的功能运行得很好(参见 demo )。

但是，我想将一个属性传递给两个子组件 - 一个 offsetSelector。无论我如何尝试设置该属性，即使在父级别也无法设置它(例如 v-bind:offsetSelector=".navbar"、:offsetSelector=". navbar"、offsetSelector=".navbar" 等)。

有人可以帮我弄清楚为什么这没有被绑定(bind)吗？

箭头到section.vue

<template>
  <div>
    <up :offsetSelector="offsetSelector"></up>
    <down :offsetSelector="offsetSelector"></down>
  </div>
</template>

<script>
import down from './section-down.vue';
import up from './section-up.vue';

export default {
  components: { down, up },
  props: [ 'offsetSelector' ],
  data: function () {
    return { }
  }
}
</script>

<style scoped>
div {
  position: fixed;
  top:50%;
  margin-left: 10px;
}

div > button {
  display: block;
  margin-bottom: 10px !important;
}
</style>

section-down.vue

<template>
  <button type="button" name="button" v-on:click="animateScrollTo">
    <i class="fa fa-chevron-down"></i>
  </button>
</template>

<script>


export default {
  props: [ 'offsetSelector' ],
  data: function () {
    return {
      offset: 0
    }
  },
  computed: {

  },
  methods: {
    setOffset: function() {
      this.offset = this.offsetSelector == undefined
      ? 0
      : $(this.offsetSelector).outerHeight() == undefined
        ? 0
        : $(this.offsetSelector).outerHeight()
    },

    animateScrollTo: function() {

      this.setOffset()


      var sections = document.querySelectorAll("section")
      var current = undefined;
      var curOffset = this.offset

      console.log('vue-down-offset', curOffset, this.offsetSelector)

      sections.forEach(function(s, i){
        var winScroll = $(window).scrollTop() - curOffset
        var curScroll = $(s).offset().top

        if ( winScroll < curScroll && current == undefined)
        { current = s }
      })

      if (current != undefined) {
        $('html, body').animate({
            scrollTop: $(current).offset().top - curOffset
        }, 1000, function() {});
      }
    }

  }
}
</script>

<style scoped>
button {
  background: radial-gradient(rgb(0, 198, 255), rgb(0, 114, 255));
  background-color: transparent;
  border: transparent 0px solid;

  margin: 0;
  padding: 0px;

  width:32px;
  height:32px;

  border-radius: 50%;
}

i { font-size: 16px; }

button:focus {
  outline: transparent 0px solid;
}
</style>

section-up.vue

<template>
  <button type="button" name="button" v-on:click="animateScrollTo">
    <i class="fa fa-chevron-up"></i>
  </button>
</template>

<script>


export default {
  props: [ 'offsetSelector' ],
  data: function () {
    return { offset: 0 }
  },
  computed: { },
  methods: {
    setOffset: function() {
      this.offset = this.offsetSelector == undefined
      ? 0
      : $(this.offsetSelector).outerHeight() == undefined
        ? 0
        : $(this.offsetSelector).outerHeight()
    },

    animateScrollTo: function() {
      this.setOffset()

      var sections = document.querySelectorAll("section")
      var current = undefined;
      var curOffset = this.offset
      console.log('vue-up-offset', curOffset, this.offsetSelector)

      sections.forEach(function(s, i){
        var winScroll = $(window).scrollTop()
        var curScroll = $(s).offset().top - curOffset

        if ( winScroll > curScroll)
        { current = s }
      })
      if (current == undefined) {
        current = document.querySelector("body")
      }

      if (current != undefined) {
        $('html, body').animate({
            scrollTop: $(current).offset().top - curOffset
        }, 1000, function() {});
      }
    }

  }
}
</script>

<style scoped>
button {
  background: radial-gradient(rgb(0, 198, 255), rgb(0, 114, 255));
  background-color: transparent;
  border: transparent 0px solid;

  margin: 0;
  padding: 0px;

  width:32px;
  height:32px;

  border-radius: 50%;
}


button:focus {
  outline: transparent 0px solid;
}

i { font-size: 16px; }
</style>

演示.html

<style media="screen">
    section {
      height: 100vh;
    }
  </style>


  <body>
    <nav class="navbar navbar-light sticky-top">
      <a class="navbar-brand" href="../../">
          <img src="../../data/vdsm.svg" alt="logo" style="width:150px;">
          <h4 class="lead"> vue components </h4>
      </a>
      <crumbs id="crumbs"></crumbs>
    </nav>
    <arrowToSection id="arrowToSection" offset-selector=".navbar"></arrowToSection>

    <section style="background-color:#5433FF;"></section>
    <section style="background-color:#20BDFF;"></section>
    <section style="background-color:#A5FECB;"></section>
    <section style="background-color:#86fde8;"></section>

  </body>

  <script type="text/javascript" src="component.js"></script>

组件.js

let arrowToSection = vdsm.arrowToSection
new Vue({
  el: '#arrowToSection',
  template: '<arrowToSection/>',
  components: { arrowToSection }
})

---

代码库

可以找到该存储库 here .

两个子组件:

• /src/scripts/modules/section-up.vue
• /src/scripts/modules/section-down.vue

我正在开发的组件:

• /src/scripts/modules/arrow-to-section.vue

组件演示:

• /demos/arrow-to-section/index.html

Answer 1

我还没有完全阅读你的存储库，但从我所看到的可以在这里找到答案:https://v2.vuejs.org/v2/guide/components-props.html

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:

基本上，props 列表中的 prop 是使用 camelCase 的，但在 html 属性中它是 kebap-case。我希望这有帮助:)