标签:生效 for 传递 ali font node 局部变量 ext func
props down, events up
父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。
静态 props
要让子组件使用父组件的数据,需要通过子组件的 props 选项。给 childNode 添加一个 props 选项和需要的forChildMsg数据;
var
childNode = {
template: `
<div>
{{forChildMsg}}
</div>
`,
props: [
"for-child-msg"
]
};
动态 props
在模板中,要动态地绑定父组件的数据到子组件模板的 props,和绑定 Html 标签特性一样,在父组件的template模板里使用v-bind绑定;
<child :
for
-child-msg=
"childMsg2"
></child>
props 验证
Vue.component(
"example"
, {
props: {
// 基础类型检测, null意味着任何类型都行
propA: Number,
// 多种类型
propB: [String, Number],
还可以在 props 定义的数据中加入自定义验证函数,当函数返回 false 时,输出警告。该函数命名是规定叫validator,自定义函数名不会生效。
props: {
"for-child-msg"
: {
validator:
function
(value) {
return
value > 100;
}
}
}
data() {
return
{
ownChildMsg:
this
.forChildMsg
};
},
watch: {
forChildMsg() {
this
.ownChildMsg =
this
.forChildMsg;
}
}
type="text"
就会替换掉 type="date"
并把它破坏!庆幸的是,class
和 style
特性会稍微智能一些,即两边的值会被合并起来,从而得到最终的值。如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false
。
标签:生效 for 传递 ali font node 局部变量 ext func
原文地址:https://www.cnblogs.com/icctuan/p/12085139.html