上篇component
元件有说到每个元件范围都应该是独立的,更不应该发生子元件直接改变根元件的情况,元件与元件又该怎麽正确传递资料呢?
Props
起手式子元件做好之後,为了能重复使用,就会使用外部元件的资料,供传子元件使用,但是又不能靠子元件直接取用,这时就用使用props
属性来完成。
<div id="app">
<h4>{{ text }}</h4>
<con-tainer :test-props="demo"></con-tainer>
</div>
:test-props="demo"
,前面的:test-props
是内层元件
,後面的"demo"
是外层元件
,好记的方式:前内後外。
const app = Vue.createApp({
data() {
return {
text: "外部元件",
demo: "外部元件传递的文字"
};
}
});
app.component("ConTainer", {
props: ["testProps"],
template: `<div>
<h4>{{ text }}</h4><h3>{{ testProps }}<h3>
</div>`
});
app.mount("#app");
内部元件的props
属性宣告从外部引入到内部元件,并且透过外层模板的v-bind
完成两个元件的资料传递,HTML
可以说是两个元件沟通的桥梁。
补充:``props
命名有使用驼峰命名,记得写在模板时要改为连字号,因为HTML
不分大小写,例如:props: ["testProps"]
的testProps
要改为test-props
。
props
单向数据流当内层元件想使用v-model
来改变外层元件的资料时会跳出这行警告,[Vue warn]: Attempting to mutate prop "test". Props are readonly.
,Props
是有读取限制的。
<div id="app">
<con-tainer :test-props="demo"></con-tainer>
</div>
const app = Vue.createApp({
data() {
return {
demo: "外部元件传递的文字"
};
}
});
app.component("ConTainer", {
props: ["testProps"],
template: `<div>
<h3>{{ testProps }}<h3>
<input type="text" v-model="testProps">
</div>`
});
app.mount("#app");
props
时有v-bind
与没有v-bind
的区别观察import-num
有无绑定v-bind
的差别:
<div id="app">
<con-tainer import-num="400"></con-tainer>
<con-tainer :import-num="num"></con-tainer>
</div>
const app = Vue.createApp({
data() {
return {
num: 500
};
}
});
app.component("ConTainer", {
props: ["importNum"],
template: `<div>
<h3>value: {{ importNum }} </h3>
<h3>value: {{ typeof importNum }} </h3>
</div>`
});
app.mount("#app");
在外部元件的模板里,未绑定v-bind
的情况下,内部元件props
依然可以接受资料,任何值传入到内部元件props
都会是string
的型别。有绑定v-bind
就会依据外部元件data
的num
型别,内部也会显示该型别。
props
型别验证多人开发有时会需要验证外部元件props
传入的型别,这时就可以使用型别验证的技巧,来得知适当的提示。
上面范例在内元件中props
都是使用阵列方式(可以带多个值),例如props:['one','two']
,如果要进行验证,就要改为大括号物件的形式。
准备好一个内部元件areaComponent
,console.log
还不会跳出提示:
<div id="app">
<area-component
:pro-a="fun" :pro-b="text"
pro-c="num" :pro-d="num">
</area-component>
</div>
const areaComponent = {
props: {
proA: Function,
//多个型别检查
proB: [String, Number],
//必要值 物件形式可以设立多个条件
proC: {
type: String,
required: true
},
//预设值
proD: {
type: Number,
default: "hello"
}
},
template: `{{ proA }} <br> {{ proB }} <br> {{ proC }} <br> {{ proD }}`
};
const app = Vue.createApp({
data() {
return {
num: 500,
text: "小明",
boo: true,
fun: () => {
return "a";
},
test: 100
};
},
components: {
areaComponent
}
});
app.mount("#app");
将上面范例程序码内部元件:pro-a="fun"
的fun
改为text
:
<div id="app">
<area-component :pro-a="text" :pro-b="text" pro-c="num" :pro-d="num"></area-component>
</div>
此时console.log
就会跳出提示:[Vue warn]: Invalid prop: type check failed for prop 'proA'. Expected Function, got String with value '小明'.
意思是预期应该是一个Function
,但传入结果却是字串
。
required: true
:一定要给一个值,如果没有就会跳出提示。
default: "hello"
:当没有透过props
传入值,画面就会给出hello
的预设值,可以将:pro-d="num"
移除看出差异在哪里。
pro-c="num"
:console.log
为什麽没跳出提示?因为没绑定v-bind
,都会自动变成String
型别。
以上如有错误,欢迎指教
PIXI.AnimatedSprite 今天介绍用PIXI.AnimatedSprite做影格动画 ...
最近有打算写一个功能 FF14官网有新消息发布,bot就会把消息发送到discord主频上 但後来发...
此篇章不会从头开始介绍 React Router,而是挑选一些它的功能去做介绍,因此本篇的范例皆是从...
先说明:今天加班到现在,所以先写一点点,後续再补上。 前天的文章有一位读者提问: 如果将团队在组织中...
Data层的任务主要是储存Object的component,保证资料的安全,他和API层一样也有AP...