详解Vue之父子组件传值

我们来详解Vue之父子组件传值的完整攻略。

在Vue中，父组件可以通过props向子组件传递数据，子组件可以通过$emit方法向父组件发送事件。这两种方式能够解决父组件和子组件数据的传递问题。

1. 父组件向子组件传值

父组件通过props向子组件传递数据，子组件通过props接收父组件传递过来的数据。下面是一个示例：

<!-- 子组件 Child.vue -->
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <child message="Hello World"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  }
}
</script>

1. 子组件向父组件传值

子组件可以通过$emit方法向父组件发送事件，并且可以附带一些数据。父组件可以通过监听这个事件，在事件响应函数中获取子组件传递过来的数据。下面是一个示例：

<!-- 子组件 Child.vue -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('send', 'Hello World')
    }
  }
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <child @send="handleSend"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  methods: {
    handleSend(message) {
      console.log(message)
      // 打印出 "Hello World"
    }
  }
}
</script>

以上是关于父子组件传值的详解攻略，通过props和$emit可以实现父子组件之间的数据传输，大家可以在实际项目中根据需要进行应用。