Vue组件间通信

props

props是父组件向子组件传参的一种方式。

使用方法

1. 在父组件中传递参数

   <Demo name="xxx/>
   

2. 在子组件中接收参数
   接收参数有三种方法

   第一种方式(只接收):
   props: [ "name"]
   
   第二种方式(限制类型):
   props:{
   	name:Number
   }
   
   第三种方式(限制类型、限制必要性、指定默认值):
   props:{
   	name:{
   		type:String,//类型
   		required:true,//必要性
   		default:"老王"//默认值
   	}
   }
   

父组件传参注意点

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

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

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

<Demo 
v-bind:title=" 'hello' + 'world' "
></Demo>

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

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

  <Demo 
  	v-bind:num="111"
  ></Demo>
  

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

  <Demo 
  	v-bind:is_false="false"
  ></Demo>
  

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

  <Demo1 
  	v-bind:arr="[1, 2, 3]"
  ></Demo>
  
  <Demo2
  	v-bind:arr="array"
  ></Demo>
  

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

  <Demo1 
  	v-bind:obj="{
  	name: 'lx',
  	age: '22'
  	}"
  ></Demo>
  
  <Demo2
  	v-bind:obj="person"
  ></Demo>
  

自定义事件

自定义事件是子组件给父组件传递参数的一种方式。一般是在子组件中使用 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>

在父组件中：子组件触发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>

事件总线

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

slot插槽

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

vuex

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