vue.js - vue组件和点击按钮警报

Question

我正在尝试让我的按钮(位于 vue 组件内)在按下时显示警报，并且消息是输入字段内容。

到目前为止我有以下内容:

HTML

    <vue-form-input placeholder="Name"></vue-form-input>     
    <vue-form-submit button-text="Submit"></vue-form-submit>

JS

Vue.component('vue-form-input', {
props: {
    placeholder: {
        String,
        required: true
    }
},
template:`
    <div>
        <input type="text" class="form-control" :placeholder="placeholder">
    </div>` });   

Vue.component('vue-form-submit', {
props: {
    buttonText: {
        String,
        required: true,
        default: 'Submit' }

},
template:`
    <div>
        <button v-on:click="submitBut" class="btn btn-lg btn-primary btn-block" type="submit">{{buttonText}}</button>
    </div>` });


new Vue({
        el: '#forms',
        data: {

        },
        methods: {
            submitBut: () => {
                alert('Blablabla')
            }
        }, })

有控制台错误1) 属性或方法“submitBut”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明响应式数据属性。2) 事件“click”的无效处理程序:未定义

有人可以帮我吗？

Answer 1

从 child 发送到 parent (see this post to understand):

Vue.component('vue-form-input', {
  props: {
    initName: { type: String },
    placeholder: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      name: this.initName
    }
  },
  template:`
    <div>
        <input v-model="name" type="text" class="form-control" :placeholder="placeholder">
    </div>`,
  watch: {
    name: function() {
      this.$emit('change', this.name);
    }
 }
});   

Vue.component('vue-form-submit', {
  props: {
      buttonText: {
          String,
          required: true,
          default: 'Submit' }

  },
  template:`
      <div>
          <button v-on:click="submitBut" class="btn btn-lg btn-primary btn-block" type="submit">{{buttonText}}</button>
      </div>`,
      
  methods: {
    submitBut: function() {
      this.$emit('submit');
    }
  }
});


new Vue({
  el: '#forms',
  data: {
		name: ''
  },
  methods: {
    changeInput: function(name) {
      this.name = name;
    },
    submitBut: function() {
      alert(this.name);
    }
  }
})

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


<div id="forms">

  <vue-form-input @change="changeInput" :init-name="name" placeholder="Name"></vue-form-input>
  <vue-form-submit @submit="submitBut" button-text="Submit"></vue-form-submit>
  Parent : {{ name }}
    
</div>