Question

我是Vue的新手（不到一周），而且我正在重写一个业余爱好项目，以便起床和前进。决定尝试组件并尝试发行。我的一个子组件发出的很好，但是父组件没有收到另一个。 vue-devtools chrome扩展程序告诉我，sidenavselect确实在发出close事件，但是sidenav v-on：close并未被触发。

<sidenav v-on:close="sidebar_show = false" v-show="sidebar_show">
    <sidenavbutton @click="draw_board">Start Round</sidenavbutton>
    <sidenavselect v-model="location" :datafield="locations" title="Location"></sidenavselect>
</sidenav>

Vue.component('sidenav', {
    props: ['method'],
    template: `
        <div class="sidenav" v-on:close="handle_close" @click.self="handle_close">
            <div class="contents" v-on:close="handle_close">
                <span class="closebtn" v-on:click="handle_close">&times;</span>
                <slot></slot>
            </div>
        </div>
    `,
    methods: {
        handle_close: function() {
            this.$emit('close');
        }
    }
});

Vue.component('sidenavbutton', {
    template: `
        <button tabindex="-1" @click="handle_click"><slot></slot></button>
    `,
    methods: {
        handle_click: function() {
            this.$emit('click');
            this.$emit('close');
        }
    }
});

Vue.component('sidenavselect', {
    props: ['datafield', 'title', 'value'],
    template: `
        <div class="sidenav-box">
            {{title}}<br>
            <select tabindex="-1" v-bind:value="value" @input="handle_close">
                <option v-for="this_data in datafield" :value="this_data.value">{{this_data.label}}</option>
            </select>
        </div>
    `,
    methods: {
        handle_close: function(event) {
            this.$emit('input', event.target.value);
            this.$emit('close');
        }
    }
});

Answer 1

Vue.component("sidenav", {
  template: `
        <div class="sidenav" @close="handle_close" @click.self="handle_close">
            <div class="contents" @close="handle_close">
                <span class="closebtn" @click="handle_close">&times;</span>
                <slot></slot>
            </div>
        </div>
    `,
  methods: {
    handle_close: function() {
      this.$emit("close");
    }
  }
});

Vue.component("sidenavbutton", {
  template: `
        <button @click="handle_click"><slot></slot></button>
    `,
  methods: {
    handle_click: function() {
      this.$emit("click");
      this.$emit("close");
    }
  }
});

Vue.component("sidenavselect", {
  props: ["value"],
  template: `
        <div class="sidenav-box">
            <select :value="value" @input="handle_close">
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">C</option>
            </select>
        </div>
    `,
  methods: {
    handle_close: function(event) {
      this.$emit("input", event.target.value);
      this.$emit("close");
    }
  }
});

new Vue({
  data() {
    return {
      sidebar_show: true,
      location: 0
    };
  },
  methods: {
    handle_close: function(event) {
      this.sidebar_show = false;
    }
  }
}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <sidenav @close="handle_close" v-show="sidebar_show">
    <sidenavbutton @close="handle_close">Start Round</sidenavbutton>
    <sidenavselect @close="handle_close" v-model="location"></sidenavselect>
  </sidenav>
</div>

您想一次做太多事情。采取较小的步骤。容易发现错误。

Answer 2

我的问题的答案是，与按钮相关的方法仍与我使用组件之前相比尚未结束。

裙子是正确的，因为我使用的每个组件都需要在其上带有@close。

我无法让vue组件正常工作

2 个答案: