Hice esto usando vue-cli . Tengo un componente llamado InputField y renderizo y monto el componente en #app . Sé que inyectará el componente en la aplicación, pero ¿cómo puedo obtener el valor "predeterminado" en index.html y acceder a él en InputField.vue ? Intenté agregar props: "default" , pero el valor predeterminado no está definido.

La idea es obtener el valor predeterminado del componente en html y guardarlo en los values de los datos cuando se monta el componente.

Agregué lo siguiente... ... a mi html pero parece que no funcionará en vue-cli .

También en mi plantilla agregué default="def" así:

 <input default="def" v-model="values" name="my-input" />

Pero cuando me refiero a "default" en js , no está definido.

InputField.vue

 <template> <div > <input default="def" v-model="valuess" name="my-input" /> <input v-model="message" type="text"> <h2 class="message">{{ message }}</h2> </div> </template> <script> module.exports={ name:'InputField', props:["default"], mounted(){ console.log(this.default); this.valuess=this.default; }, updated(){ if(this.valuess===this.default){ return this.$emit('dirty-field',false); } this.$emit('dirty-field',true); }, data: function () { return { valuess: '', message:'heelo', } } } </script>

índice.html

 <div id="app"> <InputField default="My default text"></InputField> </div>

principal.js

 new Vue({ render: h => h(InputField), }).$mount('#app');