Adding vee-validate / HTML attributes to input element in slot

javascript vue.js vuejs2 vue-component vee-validate

How about scoped slots (Vue 2.5.0+)?

<!-- form-group.vue --><template>  <div>    <label />    <slot v-bind="$props" />    <span />  </div></template>

Above, all the props of <form-group> is bound to the slot using v-bind. You may want to specify certain fields only: <slot :id="name" :data-vv-name="name" />

<form-group name="age">  <input type="number" slot-scope="slotProps" v-bind="slotProps" /></form-group>

Here, the <input> can access the slot props by using slot-scope, giving it a name (here slotProps). slotProps will contain all the props of <slot> as defined in form-group.vue.

Some more examples:

<form-group name="language">  <input type="text" slot-scope="sp" v-bind="sp" /></form-group><form-group name="hello" value="friend">  <span slot-scope="sp">    {{ sp.name }}: {{ sp.value }}  </span></form-group>

javascript vue.js vuejs2 vue-component vee-validate

As said in the comments, it is not possible to pass the props from the to the content of the slot, which is your <input>.

As this is quite complex case, it would require the use of a Render Function, which sends the custom attributes into the new tag while applying a set of default attributes.

I have done a proof of concept here: https://codepen.io/anon/pen/Ozadop?editors=1010

Show code snippet

Vue.component('my-input', {  render: function(createElement) {    const defaultSlot = this.$slots.default[0];    const domProps = Object.assign({      value: this.value,      someProp: 'foobar',      test: "asdf",      class: defaultSlot.data.staticClass    }, defaultSlot.data.attrs);    return createElement(      defaultSlot.tag, // tag name      {        attrs: domProps,        props: domProps,        on: {          input: (event) => {            this.value = event.target.value            this.$emit('input', event.target.value)          }        }      }    )  },  props: {    name: {      type: String,      required: true    },    value: {      type: String,      required: true    }  }})new Vue({  el: "#app",  data() {    return {      name: "Your Name",      age: 5    }  }});

.red {  border: 2px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script><div id="app">  Hello, {{name}}!! You are {{age}} years old.  <br/>  <my-input v-model="name">    <input customProp="myCustomProp"></input>  </my-input>  <my-input v-model="age">    <input type="number" required class="red" custom="otherCustom"></input>  </my-input></div>

Expand snippet