父子组件传值

本文主要是介绍父子组件传值，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

我们使用组件一定是依托在某一个父组件的身上，比如我们上面写的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，然后修改自己的值，从而时间子组件修改父组件的值

这么做的目的就是为了让数据可观察性更强，可维护性更高，有一个更清晰的清单

这篇关于父子组件传值的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！