vue2中,父组件给子组件传递一个方法,子组件通过调用这个方法如何拿到父组件里的值
时间: 2023-07-14 16:03:40 浏览: 64
vue-prop父组件向子组件进行传值的方法
在Vue 2中,父组件可以通过props属性将方法传递给子组件。子组件可以通过调用该方法来访问父组件的值。以下是一个示例:
父组件:
```vue
<template>
<div>
<ChildComponent :getData="getData" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
value: 'Hello from parent'
};
},
methods: {
getData() {
return this.value;
}
}
};
</script>
```
子组件:
```vue
<template>
<div>
<button @click="getValue">Get Value</button>
</div>
</template>
<script>
export default {
props: {
getData: {
type: Function,
required: true
}
},
methods: {
getValue() {
const value = this.getData();
console.log(value); // 输出:Hello from parent
}
}
};
</script>
```
在这个示例中,父组件定义了一个名为`getData`的方法,并通过props属性将该方法传递给子组件。子组件接收并声明了一个名为`getData`的prop,并在`getValue`方法中调用该方法来获取父组件的值。
阅读全文