vue父子组件传值最详细解答

父组件传子组件

父组件传给子组件使用的是props，这个props是在子组件中定义的，用来接收父组件中传来的数据，父组件则在调用子组件的时候动态绑定属性。

//在父组件中调用子组件，v-child是子组件，title和msg则是父组件data中的数据
<v-child :chlidtitle='title'></v-child>
 
//在子组件中定义props用来接收父组件数据
props: {
  'chlidtitle':{
    type: String,    //类型
    default: '哈哈哈'    //默认值
  }
}

子组件template模板中的数据渲染使用的是chlidtitle

子组件传父组件

子组件传个父组件使用的是$emit,同样这个也是在子组件中定义的。

//在子组件的methods方法中使用$emit发射事件。itemclick自定义事件，item是参数
methods: {
  btnclick(item) {
    this.$emit('itemclick',item)
  }
}
 
//在父组件中调用子组件， @itemclick='parentclick'默认了参数的传递所以可以省略parentclick后面的参数item
<v-child @itemclick='parentclick'></v-child>

//接着在父组件的methods方法中定义parentclick方法处理接收子组件传过来的参数
parentclick(item) {
  console(item)
}