时间戳

首页 > 解决方案 > 我无法让我的 vue 组件发出工作

vue.js - 我无法让我的 vue 组件发出工作

问题描述

我是 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');
        }
    }
});

标签： vue.js

解决方案

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>

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

推荐阅读