我们使用组件一定是依托在某一个父组件的身上,比如我们上面写的study.vue文件就是依托在App.vue文件中,此时我们如果要使用App.vue文件中的值怎么办
vue提供了一个props的入口,也是父子组件之间唯一的传值方式,父组件通过v-bind自定义属性传入值,子组件通过props接受对应的参数
父组件
1 <template> 2 <div id="app"> 3 <study :study="a"></study> //通过v-bind自定义属性传值 4 </div> 5 </template> 6 <script> 7 import study from "./components/study.vue" 8 9 export default { 10 components:{ 11 study 12 }, 13 data(){ 14 return{ 15 a:100 16 } 17 } 18 } 19 </script> 20 <style> 21 </style>
通过v-bind自定义属性传值,注意由于vue的属性对大小写不敏感,所以如果需要写驼峰命名,需要使用-隔开
子组件
1 <template> 2 <div id="app"> 3 <h1>父组件的{{study}}</h1> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 props:["study"], // 罗列父组件传进的属性值 10 data(){ 11 return { 12 a:100 13 } 14 }, 15 methods:{ 16 } 17 } 18 </script> 19 <style > 20 </style>
此时浏览器可以看到父组件中的值
子组件通过props罗列父组件的传值,接收的参数可以有多个,props可是数组,也可以是对象
父组件
1 <template> 2 <div id="app"> 3 <study :study-a="a" :study-b="b" :study-c="c"></study> 4 </div> 5 </template> 6 <script> 7 import study from "./components/study.vue" 8 9 export default { 10 components:{ 11 study 12 }, 13 data(){ 14 return{ 15 a:100, 16 b:200, 17 c:300 18 } 19 } 20 } 21 </script> 22 <style> 23 </style>
子组件
1 <template> 2 <div id="app"> 3 <h1>父组件的{{studyA}},{{studyB}},{{studyC}}</h1> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 props:["study-a","study-b","study-c"], 10 data(){ 11 return { 12 a:100 13 } 14 }, 15 methods:{ 16 } 17 } 18 </script> 19 <style > 20 </style>
此时浏览器会输出这三个值
注意,子组件中的接收值的形式不能这样写,会报错
1 <h1>父组件的{{study-a}},{{study-b}},{{study-c}}</h1>
可以使用对象去接收参数
1 props:{ 2 studyA:String, 3 studyB:String, 4 studyC:String 5 },
此时浏览器依旧会输出结果,但是会报错
如果props是一个对象,那么这个对象的key是自定义传入参数属性,value是希望传入的参数类型
比如我们限制的是数字类型
但是我们传入的是一个字符串,此时,控制台后报错,提示你希望传入number类型
1 props:{ 2 studyA:Number, 3 studyB:Number, 4 studyC:Number 5 },
此时改为number便不会报错
如果props是对象的话,参数可以配置
比如配置参数必填项
1 props:{ 2 studyA: { 3 type: Number, 4 required: true 5 }, 6 studyB: Number, 7 studyC: Number
父组件中
1 <template> 2 <div id="app"> 3 <study :study-b="b" :study-c="c"></study> 4 </div> 5 </template>
如果props的值也是一个对象,type代表的是类型,required是一个布尔值,如果为ture代表的是设置必填项,如果不填,则会抛出错误
比如default代表的是默认的不传入的值的参数
1 props:{ 2 studyA: { 3 type: Number, 4 required: true, 5 default:500 6 },
如果props的default值是Object或者Array,需要使用函数return
1 props:{ 2 studyA: { 3 type: Array, 4 default:[1,2,3] 5 },
此时页面会报错
此时我们将props中default使用函数return
1 props:{ 2 studyA: { 3 type: Array, 4 default:function(){ 5 return [1,2,3] 6 }
页面显示为
validator数据的校验
1 props:{ 2 studyA: { 3 type: Number, 4 validator:function(value){ 5 return value>50 6 } 7 },
此时传入a的值为100,当valiator中的value值大于50时显示,否则虽然也会显示但是会报错
1 props:{ 2 studyA: { 3 type: Number, 4 validator:function(value){ 5 return value>500 6 } 7 },
需要注意的是子组件不可以直接修改父组件的值,只能传出一个自定义事件,父组件通过调用这个自定义事件后,然后在外部修改值
子组件代码
1 <template> 2 <div id="app"> 3 <h1>父组件的{{studyA}},{{studyB}},{{studyC}}</h1> 4 <button @click="add">加一</button> 5 </div> 6 </template> 7 <script> 8 export default { 9 props:{ 10 studyA:Number, 11 studyB: Number, 12 studyC: Number 13 }, 14 data(){ 15 return { 16 a:100 17 } 18 }, 19 methods:{ 20 add(){ 21 this.$emit("add") 22 } 23 } 24 } 25 </script> 26 <style > 27 </style>
父组件代码
1 <template> 2 <div id="app"> 3 <study @add="sumNumber" :study-a="a" :study-b="b" :study-c="c"></study> 4 </div> 5 </template> 6 <script> 7 import study from "./components/study.vue" 8 9 export default { 10 components:{ 11 study 12 }, 13 data(){ 14 return{ 15 a:100, 16 b:200, 17 c:300 18 } 19 }, 20 methods:{ 21 sumNumber(){ 22 this.a++ 23 } 24 } 25 26 } 27 </script> 28 <style> 29 </style>
此时就可以修改父组件中的值
$emit方法是vue封装的,用来想父组件返回对应的自定义事件,父组件通过在子组件身上设置对应的自定义事件后设置事件名称
@add自定义事件是子组件通过$emit传出来的自定义事件,父组件通过这个事件设置事件方法sunNum,然后修改自己的值,从而时间子组件修改父组件的值
这么做的目的就是为了让数据可观察性更强,可维护性更高,有一个更清晰的清单