介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title>道具的测试& lt;/title>
& lt;才能script src=? ./js/vue.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=皃rops"祝辞
& lt;才能Child 消息=案缸榧南?我把他的内容重新定义了,但是父组件不会发生改变哦,因为没有绑定,哈哈! !“祝辞& lt;/Child>
& lt;才能hr /比;
& lt;才能input v模型=癿essage"/比;
& lt;才能Child : message=& # 39;消息# 39;祝辞& lt;/Child>
& lt;/div>
& lt; script>
Vue.component才能(& # 39;孩子# 39;,{
,,,道具:,(& # 39;消息# 39;),
,,,模板:,& # 39;& lt; span> {{, message }} & lt;/span> & # 39;
,,});
var 才能;vm =, Vue ({new
el:,,,, & # 39; #道具# 39;
数据:,,,,{
,,,,,的信息:,& # 39;支撑的测试& # 39;
,,,}
,,});
& lt;/script>
& lt;/body>
& lt;/html> & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title>道具的测试& lt;/title>
& lt;才能script src=? ./js/vue.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=皃rops"祝辞
& lt;才能input v模型=癿essage"/比;
& lt;才能Child : message=& # 39;消息# 39;祝辞& lt;/Child>
& lt;/div>
& lt; script>
Vue.component才能(& # 39;孩子# 39;,{
,,,道具:,(& # 39;消息# 39;& # 39;todos # 39;],
,,,模板:,& # 39;& lt; span> {{, test }} & lt;/span> & # 39;
,,,:计算,{
,,,,,测试:,函数(){
,,,,,,,return this.message.trim () .toUpperCase ();
,,,,,}}
,,});
var 才能;vm =, Vue ({new
el:,,,, & # 39; #道具# 39;
数据:,,,,{
,,,,,的信息:,& # 39;支撑的测试& # 39;
,,,}
,,});
& lt;/script>
& lt;/body>
& lt;/html> Vue.component(& # 39;示例# 39;,{
,,道具:{
,,,propA:,字符串,
,,,propB:,(数字、字符串)
}
}); 为什么要使用Vue
本篇文章给大家分享的是有关的道具如何在Vue中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
道具属性是父子组件之间的通信桥梁。何为父子组件?从子组件的观点来看,他的上一级实例或组件即为他的父组件。我们知道,处于安全考虑,组件模板里我们无法直接使用父组件的数据数据,使用道具这个属性可以将父组件的数据传给子组件。
代码效果图
在子组件中对父组件的数据进行处理。父组件的数据通过道具传入子组件以后,在子组件中也可对数据进行相关处理,包括计算属性,数据属性等。这样当子组件需要对数据进行处理时,避免了直接在父组件中对数据进行操作,而且由于道具数据流单向性,在子组件中更改数据时,不会对父组件的数据产生影响。
代码效果图
代码效果图
<强>道具的验证
,我们可以为组件的道具指定验证规则。如果传入的数据不符合要求,Vue会发出警告。这对于开发给他人使用的组件非常有用。
要指定验证规则,需要用对象的形式来定义道具,而不能用字符串数组
Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。
以上就是道具如何在Vue中使用,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
