vue父传子和子传父及方法调用

好的，关于Vue组件之间的通信，可以通过props和$emit实现父子组件之间的通信，并且可以通过$refs调用子组件的方法。

1. 父传子：通过props可以将父组件的数据传递给子组件，子组件可以在props里面获取到父组件传递过来的数据。

父组件：

<template>
  <div>
    <child-component :parentData="data"></child-component>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        data: 'Hello World'
      }
    }
  }
</script>

子组件：

<template>
  <div>
    <p>{{ parentData }}</p>
  </div>
</template>
<script>
  export default {
    props: {
      parentData: String
    }
  }
</script>

2. 子传父：通过$emit可以向父组件传递事件和数据，父组件可以通过监听子组件的事件来获取子组件传递过来的数据。

子组件：

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>
<script>
  export default {
    methods: {
      handleClick() {
        this.$emit('child-event', 'Hello World')
      }
    }
  }
</script>

父组件：

<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>
<script>
  export default {
    methods: {
      handleChildEvent(data) {
        console.log(data) // Hello World
      }
    }
  }
</script>

3. 子组件方法调用：通过$refs可以获取到子组件的实例，从而调用子组件的方法。

父组件：

<template>
  <div>
    <button @click="handleClick">Click Me</button>
    <child-component ref="child"></child-component>
  </div>
</template>
<script>
  export default {
    methods: {
      handleClick() {
        this.$refs.child.childMethod()
      }
    }
  }
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Hello World'
      }
    },
    methods: {
      childMethod() {
        console.log('Child Method Called')
      }
    }
  }
</script>

希望能够对你有所帮助！