Question

我正在尝试从我的下拉按钮组件传递道具：

<template>
    <div>
        <p @click="toggleActive">Open Drop Down</p>
        <drop-down :active="this.active"></drop-down>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active: false,
            }
        },
        methods: {
            toggleActive() {
                return this.active = ! this.active;
            }
        }
    }
</script>

到我的下拉组件：

<template>
    <div class="drop-down" v-if="this.passedActive">
        <p @click="toggleActive">Close drop down</p>
            ....

<script>
    export default {
        props: ['active'],
        data() {
            return {
                passedActive: this.active,
            }
        },
        methods: {
            toggleActive() {

                return this.passedActive = ! this.passedActive;
            }
        }
    }
</script>

我的想法是我可以从它的父级激活下拉组件，然后在下拉组件中我可以修改这个prop并停用下拉 - 好像有人在组件内按下'x'。 / p>

我已经检查了docs，这似乎是正确的方法，但由于某些原因它无效。

Answer 1

以下代码有效。如您问题中的评论所述，passedActive已初始化一次。父级控制初始状态（仅限），子级本身控制任何后续状态。如果你从错误开始，它永远不会变为真，因为控制器永远不会显示。

这是一个设计缺陷：应该有一个控制它的数据项，而不是两个。子组件应该依赖于它的prop，它的toggle函数应该发出父句柄处理的事件。

new Vue({
  el: '#app',
  data: {
    active: true
  },
  methods: {
    toggleActive() {
      console.log("Toggling");
      this.active = !this.active;
    }
  },
  components: {
    dropDown: {
      props: ['active'],
      data() {
        return {
          passedActive: this.active,
        }
      },
      methods: {
        toggleActive() {
          return this.passedActive = !this.passedActive;
        }
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <p @click="toggleActive">Open Drop Down {{active}}</p>
  <drop-down :active="active" inline-template>
    <div class="drop-down" v-if="this.passedActive">
      <p @click="toggleActive">Close drop down</p>
    </div>
  </drop-down>
</div>

传入道具并将其设置为数据

1 个答案: