vue学习日记——父子组件间数据传递

在 vue 中组件实例的作用域是相互独立的，所以子组件不能直接使用父组件中的数据。子组件要想获取父组件的数据，可以采用以下两种方式：

1、子组件中使用 (this.$parent.变量名) 调用，例：

//父组件



//子组件

2、在父组件中将需要传递的数据通过属性名绑定给子组件，在子组件中用 props 接收数据，例：

//父组件



//子组件



//子组件采用 props 接收数据也有几种不同的方式：
//方式1：
props: ['fMsg']
//方式2 :
props: {
  fMsg: String //指定期望接收的数据类型
}
//方式3：
props: {
  fMsg:{
    type: String,   //指定传入的类型
  default: "message" //指定默认的值
  }
}

同样，父组件要获取子组件的数据也有两种方法：
1、在父组件中给子组件绑定一个 ref 属性，这样父组件中就可以通过(this.$ref.(ref值).属性名)的方式获取数据了，例：

//父组件


//子组件

2、在父组件中给子组件绑定事件，在子组件中通过(this.$emit(事件名, 参数))，向父组件传递数据，例：

//父组件


//子组件