Vue-父子组件传值

在工作开发中，我们不可能把所有的代码放在一个页面去写，我们可以把公用重复的代码抽取出来，放在单独文件中，在父组件中引入。但是子组件和父组件可能会用到同一个参数，这个时候我们就需要把父组件的值传递给子组件，但是我们需要注意，vue遵守单向数据流原则，简单的说就是父组件的数据可以传递给子组件，子组件也可以正常获取并使用由父组件传过来的数据；但是，子组件中不能直接修改父组件传过来的数据，必须要向父组件传递一个事件来父组件需要修改数据，即通过子组件的操作，在父组件中修改数据。

一、普通方式实现父子组件传值

父组件使用自定义属性向子组件传值，通过自定义事件接收事件；子组件通过props接收数据，子组件通过$emit 向父组件传递自定义事件。

‍

二、v-model 实现父子组件传值

三、.sync 修饰符 实现父子组件传值

当我们传递属性时，后面加一个.sync修饰符，当子组件修改属性时，通过this.$emit和update去通知父组件修改属性

‍

四、通过ref修改子组件内部属性

当我们不通过props接收数据，我们可以给子组件加一个ref值，通过this.$refs[子组件ref值]拿到子组件，再通过点的方式修改子组件自己的内部属性值，达到传递值的效果

五、this.$parent

在子组件中，我们也可以通过this.$parent拿到父组件里面所有的方法和属性。

六、slot插槽

slot插槽在一定条件下，也是可以作为父子组件传值的一种方式，具体可以查看vueslot插槽使用。

本文是建立在Vue2版本之上，Vue3会有略微不同。