vue2.0父子组件之间传值

时间:2022-12-20 11:00:18

1、子组件调用父组件方法

vue2.0父子组件之间传值vue2.0父子组件之间传值
//父组件

<children @click="handleClick" > </children>

handleClick (txt) {
console.log(
'我是父组件的方法')
}

//子组件

<div @click = "fn"> </div>

fn() {
this.$emit('handleClick','我是参数') //触发父组件的方法
}
View Code

2、父组件调用子组件方法

vue2.0父子组件之间传值vue2.0父子组件之间传值
//父组件

<div @handleClick="add”></div>

add (n) {
console.log(n)
}

//子组件

<div @click=
"fn"></div>


fn() {
this.$emit('handleClick', 'cc')
}
View Code

3、props 组件间传值

vue2.0父子组件之间传值vue2.0父子组件之间传值
//父组件

<children data="45455"></children>

//子组件

<div>{{data}}<div>

props: {
data: {
type: [String,Number],
default: ''
}
}
View Code