Vue2：道具未绑定

Question

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

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

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

到目前为止，我得到这个功能非常好（见demo）。

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

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

arrow-to-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>

demo.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>

component.js

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

---

代码库

repo 可以在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://vuejs.org/v2/guide/components-props.html

HTML 属性名称不区分大小写，因此浏览器会解释 任何大写字符为小写。这意味着当您使用 在 DOM 模板中，camelCased 的道具名称需要使用它们的 kebab-cases （连字符分隔）等价物：

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

Answer 2

为什么它不起作用

实际上，答案很简单：您没有在 arrowToSection 组件上放置任何道具。虽然在你的身体中有一个令人困惑的元素 <arrowToSection>，但 arrowToSection 组件并没有安装在它上面——至少没有直接安装。您在 component.js 中创建的匿名 Vue 实例中创建 arrowToSection 组件，此处为：template: '<arrowToSection/>'。而且你没有向它传递任何道具。

如何解决

要修复它，您需要在此处传递道具：

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

接下来，你可能会问“为什么不给这个匿名元素添加一个 prop，而使用 body HTML 中设置的值”。答案是，props 是在 Vue 组件之间传递值的方式。外部 HTML 不是 Vue 组件，您不能从那里传递道具。您在 #arrowToSection 元素上添加的属性只是普通属性（顺便说一句，整个元素被替换并且参数丢失）。

稍后注意：This example in documentation 显示属性显然是从 HTML 元素中读取的。这似乎与我的实验有些矛盾。如果您使用完整的 v-bind:prop="..." 表示法而不是 :prop="..." 简写，则传递道具可能会起作用。

propsData 的替代解决方案

如果你真的想使用道具，你可以使用propsData：

let arrowToSection = vdsm.arrowToSection
new Vue({
  el: '#arrowToSection',
  props: ['offsetSelector'],
  propsData: {
    offsetSelector: '.navbar',
  },
  template: '<arrowToSection :offsetSelector="offsetSelector" />',
  components: { arrowToSection }
})

如您所见，这确实是人为的，没有任何意义。但是，您并不真正需要中间组件，因此，至少在实践中，您可以这样使用propsData：

let arrowToSection = vdsm.arrowToSection
new Vue(Object.assign({}, arrowToSection, {
  el: '#arrowToSection',
  propsData: {
    offsetSelector: '.navbar',
  },
}))

免责声明：我不确定官方是否支持以这种方式使用组件。可能不是。但它有效。