vue父子间传值

搭建项目：本项目使用vue-cli脚手架工具直接搭建
项目结构：

父子组件间传值目录结构

1. 父传子

在父组件调用自组件时，给子组件绑定自定义属性，在子组件中使用props接收，子组件内部直接当成属性使用
父组件调用子组件：

子组件接收：

props: ['title', 'value', "city"],

app.vue

father.vue

son.vue

2.子传父（两种方式）

• 在父组件调用子组件时，给子组件绑定自定义属性, 这个自定义属性是一个函数。
  在子组件内部使用props接收。当需要传值给父组件时，就调用这个属性，通过调用函数传值给父组件。
• 在父组件调用子组件时，给子组件绑定自定义事件，事件的实现在父组件中，是一个函数。
  当子组件需要传值给父组件时，就使用this.$emit()触发该事件，并传参进去，那么父组件的函数就可以接收到参数了。

第一种方式：

父组件调用子组件：

函数实现

//函数的实现，也就是传入子组件中的函数，参数为接收子组件传过来的值
    handleSendAction(val){
      console.log('触发了:', val);
      this.arr.push(val);
    }
  }

子组件接收：

 props: {
   onSend: Function
 },

子组件传值触发事件

  发送

// 通过触发事件，触发父组件传过来的函数
    btnAction(){
      console.log(this.value);
      // 调用父组件的属性，这个属性是一个函数，传入参数为子组件传过去的值
      this.onSend(this.value);
    }
 

father.vue

son.vue

第二中方式：

父组件调用子组件：

函数实现：

 handleSendAction(val, ...rest){
      console.log('触发了:', val, rest);
      this.arr.push(val);
    }

子组件触发：

发送

btnAction(){
      console.log(this.value);

      // 触发组件标签上的事件
      // 自定义事件
      // 参数1:自定义事件的名字
      // 参数2:调用事件的参数
      this.$emit('send', this.value, 1, 2, 3);
    }

father.vue

son.vue