props down, events up
Parent props assembly downwardly through the data transfer to the subassembly; subassembly events by sending a message to the parent component.
Static props
Use the data to make subassemblies parent component, we need props options through sub-assemblies. Add a props options and forChildMsg data needed to childNode;
var
childNode = {
template: `
<div>
{{forChildMsg}}
</div>
`,
props: [
"for-child-msg"
]
};
Properties props statement, where template templates represent subcomponents of a parent component, need to use the property name underlined wording;
When the sub-assembly props attribute declaration, or a small hump are underlined written; template while variables transmitted from the parent component subassembly, the corresponding need to use a small hump wording
Dynamic props
In the template, to dynamically bind data to the parent component subassembly props template, labels and binding properties as Html, using v-bind bound template in the template parent element;
<child :
for
-child-msg=
"childMsg2"
></child>
props 验证
Verify that incoming data specification props parameter, if the data does not meet specifications, Vue will be issued a warning.
Vue.component(
"example"
, {
props: {
// 基础类型检测, null意味着任何类型都行
propA: Number,
// 多种类型
propB: [String, Number],
It may also be added props custom validation function definition data, when the function returns false, outputs a warning. The function name is specified called validator, a custom function name will not take effect.
props: {
"for-child-msg"
: {
validator:
function
(value) {
return
value > 100;
}
}
}
Unidirectional data flow
props is a one-way binding: when the attribute change of the parent component, is conducted to the subassembly, but not vice versa.
Modify data props
Defines a local variable, and initializes it with the value of the prop. However, due to the definition of ownChildMsg only accept initial value forChildMsg when the value of the change parent component to be passed occur, ownChildMsg not receive updates.
A more appropriate way is to use the initial value of the variable storage prop, and the prop is worth a watch to observe the changes. When a change occurs, the value of the updated variable.
data() {
return
{
ownChildMsg:
this
.forChildMsg
};
},
watch: {
forChildMsg() {
this
.ownChildMsg =
this
.forChildMsg;
}
}
For most characteristics, the values provided to the assembly from the outside will replace the value of the component is provided inside good. So if passed
type="text"
will replace
type="date"
and destroy it! Fortunately,
class
and
style
characteristics of a number of intelligent slightly, i.e., the value of both sides are combined, to yield the final value.
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。