Question

认为我正在努力，这是一些非常基本的内容，但似乎不起作用...

基本上，单击链接应在真假之间切换</body> <script type="text/javascript">mount("wplm");</script>  </html>，但事实并非如此。

display

Vue.component('dropdown', {
    props: [ 'expanded' ],
    data: function() {
      return {
        display: !!(this.expanded)
      }
    },
    template: '<div><transition name="expand"><slot :display="display"></slot></transition></div>'
  });
  window.app = new Vue({
   el: '#app'
  });

编辑：

更新的代码，我忘记了更改，实际上点击事件确实为<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <dropdown> <div slot-scope="{ display }"> <a href="javascript:void(0)" @click="display = !display">Toggle {{ display }}</a> <div v-if="display"> Dropdown content </div> </div> </dropdown> </div>。但是即使如此，如果您尝试单击该按钮，您仍会看到它也不会更改真实的...

Answer 1

在经过 thanksd 的更正注释后进行更新。我偶然发现了正确答案，却没有真正理解它。

问题在于，在插槽中，display引用了作用域插槽对象中的一个项目。在此处更新它不会更新实际的源变量。如果传入并调用函数，则会更新适当的变量。

Vue.component('dropdown', {
  props: ['expanded'],
  data: function() {
    return {
      display: Boolean(this.expanded)
    }
  },
  methods: {
    toggle() {
        this.display = !this.display;
    }
  },
  template: '<div><transition name="expand"><slot :display="display" :toggle="toggle"></slot></transition></div>'
});

new Vue({
  el: '#app'
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <dropdown>
    <div slot-scope="{display, toggle}">
      <a href="javascript:void(0)" @click="toggle">Toggle {{ display }}</a>
      <div v-if="display">
        Dropdown content
      </div>
    </div>
  </dropdown>
</div>

Answer 2

一种解决方案是为v-model组件实现dropdown，这将允许您将display属性与父属性一起双向绑定。这样一来，您无需通过slot-scope传递任何内容。

这是一个例子：

Vue.component('dropdown', {
  props: [ 'value' ],
  data() {
    return {
      display: !!(this.value)
    }
  },
  watch: {
    value(value) {
      this.$emit('input', value);
    }
  },
  template: '<div><transition name="expand"><slot></slot></transition></div>'
});

new Vue({
  el: '#app',
  data() {
    return { dropdownToggle: false }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <dropdown v-model="dropdownToggle">
      <div>
        <a href="javascript:void(0)" @click="dropdownToggle = !dropdownToggle">
          Toggle {{ dropdownToggle }}
        </a>
        <div v-if="dropdownToggle">
          Dropdown content
        </div>
      </div>
  </dropdown>
</div>

Vue组件，切换数据

2 个答案: