vue component and alert on click button

Question

I`m trying to make my button (which is inside vue component) to show alert when pressed, and a message is input field content.

so far i have following:

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')
            }
        }, })

There are console errors 1) Property or method "submitBut" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 2) Invalid handler for event "click": got undefined

Can someone please help me with that?

Answer 1

Emit from child to 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>