how to expose property on component in vue.js 2.0 - vue.js

Question

I am thinking how to implement validation on vue.js component.
The initial idea is that component validates and return an error code, like: "require", "min", "max" etc. Another component will display full text message according to this error code.
Because error message might not always display inside component's template. I need two separated components.
pseudo code is like this.
<div>
<mycomponent ref="salary" errcode="ErrorCode"></mycomponent>
</div>
.....
<div>
<errormessage watchcomponent="salary" message="salaryErrorMessages"></errormessage>
</div>
salaryErrorMessages is a hash of codes and messages. for example:
{"require":"please enter salary",
"min": "minimum salary value is 10000"}
Vue has ref attribute on component, . I don't know if I can use ref to reference a component in attribute.
Other solutions I considered:
add an error object in model of the page, and pass into using :sync binding. can monitor same object.
This requires to declare error messages in model.
If I consider the requirement that page also needs to know if there is an error before post back. a global error object might be necessary.
use event bus or Vuex.
This seems official solution, but I don't know .
When a page has multiple instances of , they will trigger same event. all instances will monitor same event.

Answer 1

You should definitely use Vuex. Not only it solves your problem, but it gives you huge scalability in your project.

Answer 2

You're working literally backwards. Vue is about passing data from parent to child, not exposing child properties to parent components.
add an error object in model of the page, and pass into using :sync binding. can monitor same object. This requires to declare error messages in model.
sync is gone from Vue v2, but the idea is fundamentally sort of correct: a parent component holds one object, child components get passed chunks of it as props, parent object automagically gets updated in the parent when it is changed in a child. It doesn't have to be the root component.
use event bus or Vuex. This seems official solution, but I don't know .
Vuex is pretty much always the Correct solution if you have an application that needs to manage a lot of state-related shenanigans.
When a page has multiple instances of , they will trigger same event. all instances will monitor same event.
Vue will very frequently pollute your console with warnings that data must be a function. This is why!
Here is an abridged version really shameful hackjob I inflicted on innocen made for an acquaintance recently:
In my defense, putting things in __proto__ is a very quick way to make them non-enumerable.
Vue.component('error', {
template: '#error',
props: ['condition', 'errorMessage']
})
Vue.component('comp', {
template: '#comp',
props: ['errorMessage', 'model'],
})
Vue.component('app', {
template: '#app',
data() {
return {
models: {
nameForm: {
firstName: '',
lastName: '',
__proto__: {
validator: function(value) {
return _(value).every(x => x.length > 2)
}
}
},
otherForm: {
notVeryInterestingField: 'There are words here',
veryImportantField: 0,
__proto__: {
validator: function(value) {
return value.veryImportantField > 20
}
}
},
__proto__: {
validator: function(value) {
return _(value).every(x => x.validator(x))
}
}
}
}
}
})
const vm = new Vue({
el: '#root'
})
.error {
background: orange
}
.alright {
background: mediumaquamarine
}
section > div, pre {
padding: 6px;
}
section {
flex: 1;
}
#root {
display: flex;
flex-direction: column;
}
<script src="https://unpkg.com/vue#2.1.6/dist/vue"></script>
<script src="https://unpkg.com/lodash"></script>
<template id="comp">
<div :class="[model.validator(model) ? 'alright' : 'error']" style="display: flex; border-bottom: 2px solid rgba(0,0,0,0.4)">
<section>
<div v-for="(field, fieldName) in model">
{{_.startCase(fieldName)}}:
<input v-model="model[fieldName]">
<br>
</div>
<error :condition="!model.validator(model)" :error-message="errorMessage"></error>
</section>
<section>
<pre>props: {{$options.propsData}}</pre>
</section>
</div>
</template>
<template id="error">
<div v-if="condition">
{{ errorMessage || 'Oh no! An error!' }}
</div>
</template>
<template id="app">
<div :class="[models.validator(models) ? 'alright' : 'error']">
<comp :model="model" error-message="Mistakes were made." v-for="model in models"></comp>
<pre>data: {{$data}}</pre>
</div>
</template>
<div id="root">
<app></app>
</div>