利用props实现父组件向子组件传递数据

实例演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!--App.vue父组件-->
<template>
  <!--加载组件第三步：显示子组件-->
  <h3>我是父组件</h3>
  <MyComponent :msg="message"/>
</template>

<script>
//加载组件第一步：引入子组件
import MyComponent from "@/components/MyComponent"

export default {
  name: 'App',
  //加载组件第二步：挂载子组件
  components: {
    MyComponent
  },
  data(){
    return{
      message:"I am your father."
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
h3{
  color: red;
  font-weight: bolder;
}
</style>


<!--MyComponent.vue子组件-->
<template>
  <h3>我是子组件</h3>
  <div>父组件向子组件传递的值是：{{msg}}</div>

</template>

<script>
export default {
  name: "MyComponent",
  props:{
    msg:{
      type:String,
      default:""
    }
  }
}
</script>

<!--scoped代表当前样式只在当前组件中生效-->
<style scoped>
h3{
  color: red;
  font-weight: bolder;
}
</style>

效果图

props介绍

  • props传递参数的类型可以是：String、Number、Boolean、Array、object、Function
  • 子组件利用props接受来自父组件的数据时，需要指定传递的类型以及默认值(default)；当数据类型为数组或者对象的时候，默认值是需要返回工厂模式(利用函数形式返回)
1
2
3
4
5
6
7
8
9
10
11
Names:{
      type:Array,
      //数组和对象的默认值必须使用函数进行返回
      default:function (){
        return [];
      }
},
Alert:{
      type:Function,
      default:()=>({})
}
  • props是只读的，vue底层会检测你对props的修改，如果进行了修改，控制台会报错，必须修改，就复制一份到data中，通过data去修改数据

自定义事件实现反向传递

实例演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!--App.vue父组件-->
<template>
  <!--加载组件第三步：显示子组件-->
  <h3>我是父组件</h3>
  <div>子组件向父组件传递的数据：{{msgFromChild}}</div>
  <MyComponent :msg="message" @OnChild="GetData"/>
</template>

<script>
//加载组件第一步：引入子组件
import MyComponent from "@/components/MyComponent"

export default {
  name: 'App',
  //加载组件第二步：挂载子组件
  components: {
    MyComponent
  },
  data(){
    return{
      message:"I am your father.",
      msgFromChild:""
    }
  },
  methods:{
    //data即从子组件接收到的数据(其会作为GetData的参数)
    GetData(data){
      console.log(data);
      this.msgFromChild=data
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
h3{
  color: red;
  font-weight: bolder;
}
</style>


<!--MyComponent.vue子组件-->
<template>
  <h3>我是子组件</h3>
  <div>父组件向子组件传递的值是：{{msg}}</div>
  <button @click="SendHandle">子组件将值传递给父组件</button>
</template>

<script>
export default {
  name: "MyComponent",
  data(){
    return {
      messagePlus:"I am your children."
    }
  },
  props:{
    msg:{
      type:String,
      default:""
    }
  },
  methods:{
    SendHandle(){
      this.$emit("OnChild",this.messagePlus)
    }
  }
}
</script>

<!--scoped代表当前样式只在当前组件中生效-->
<style scoped>
h3{
  color: red;
  font-weight: bolder;
}
</style>

效果图

利用$emit实现反向传递

  • $emit有两个参数：第一个参数是字符串，表示自定义事件的名称，用于父组件中事件触发，一般是有意义的；第二个参数是要传递的数据，注意如果要传递的数据是在子组件的data中要使用this属性
  • 要传递的数据可以有多个，通过逗号隔开

如果文章内容存在问题欢迎在评论区提出！