第一种方式(只接收):
props: [ "name"]

第二种方式(限制类型):
props:{
	name:Number
}

第三种方式(限制类型、限制必要性、指定默认值):
props:{
	name:{
		type:String,//类型
		required:true,//必要性
		default:"老王"//默认值
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

父组件传参注意点

首先，可以传递给prop一个静态值，像下边这样

<Demo title="hello world">Demo>
1

也可以通过 v-bind 动态赋值，例如

<Demo 
v-bind:title=" 'hello' + 'world' "
>Demo>
1
2
3

prop是可以传任何类型的值的，但是需要用到 v-bind

• 如果要传递一个数字，数字是静态的，传递过去就会变成字符串，使用 v-bind可以告诉 vue，这是一个表达式而不是一个字符串。

  <Demo 
  	v-bind:num="111"
  >Demo>
  1
  2
  3

• 如果要传递一个布尔值，使用 v-bind可以告诉vue，这不是一个字符串

  <Demo 
  	v-bind:is_false="false"
  >Demo>
  1
  2
  3

• 传递数组有两种方式：传递静态数组；传递数组变量。但是也要用 v-bind告诉vue，这不是一个字符串。

  <Demo1 
  	v-bind:arr="[1, 2, 3]"
  >Demo>
  
  <Demo2
  	v-bind:arr="array"
  >Demo>
  1
  2
  3
  4
  5
  6
  7

• 传递对象和数组一样，两种方式：静态对象；对象变量

  <Demo1 
  	v-bind:obj="{
  	name: 'lx',
  	age: '22'
  	}"
  >Demo>
  
  <Demo2
  	v-bind:obj="person"
  >Demo>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

自定义事件

自定义事件是子组件给父组件传递参数的一种方式。一般是在子组件中使用 this.$emit(“eventName”, …args) 来触发事件，而在父组件中使用 v-on 绑定 eventName 事件，等待子组件触发。
举个例子：

在子组件中：点击发送按钮就用 emit 触发父组件中监听的事件，从而实现给父组件传参

<template>
  <button @click="send">给父组件发送信息button>
template>

<script>
export default {
  components: {
    sonCompenent,
  },
  data() {
    return {
      msg: "i am son",
    }
  },
  methods: {
    send() {
      this.$emit("receiveData", msg)
    },
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在父组件中：子组件触发emit之后，父组件中的监听到了receiveData事件，然后触发recv方法，将子组件传递的信息放到data.msg中

<template>
  <span @receiveData="recv">span>
template>

<script>
export default {
  components: {
    fatherCompenent,
  },
  data() {
    return {
      msg: "",
    }
  },
  methods: {
    recv(dataFromSon) {
      this.msg = dataFromSon.msg
    },
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

事件总线

关于事件总线，作者看到了一篇写的很好的文章，作者也写不出水平和这篇差不多的，所以直接看大佬的吧。传送门

slot插槽

插槽是父组件向子组件传参的一种方法
作者在此之前已经写过slot插槽的相关介绍，所以直接跳转

vuex

作者在此之前已经写过slot插槽的相关介绍，所以直接跳转