浅谈父子组件传值问题

在Vue.js应用中，经常需要在组件之间传递数据，特别是在父子组件之间。这篇文章将讨论一些 Vue.js 中父组件和子组件之间数据传递的方法和技巧。

父组件通过 props 向子组件传递数据

通过 props，父组件可以向子组件传递数据。

<template>
  <div>
    <ChildComponent message="Hello World"></ChildComponent>
  </div>
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在父组件中，通过向 ChildComponent 添加 message 属性，可以将 message 数据传递给子组件。子组件中使用 props 定义 message 属性，并在自身的模板中输出。

子组件向父组件传递事件

如果子组件需要将一些信息传递回父组件，需要在子组件中触发事件，并将信息通过事件传递。

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send message to parent component</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello from child component')
    }
  }
}
</script>

<template>
  <div>
    <ChildComponent @send-message="handleMessage"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

在子组件中，通过 $emit 方法触发名为 send-message 的事件，并传递一段文本信息。在父组件中，通过监听名为 send-message 的事件，并在事件处理程序中接收到子组件传递的文本信息。

父组件通过 v-model 双向绑定传递数据

使用 v-model，父组件可以通过双向绑定向子组件传递数据。

<template>
  <div>
    <ChildComponent v-model="message"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

父组件中的 v-model 指令用于绑定 message 数据，并将其传递给子组件。在子组件中，使用 props 接收 value 属性，并将其绑定至 input 元素，当 input 事件触发时，使用 $emit 方法向父组件触发名为 input 的事件，并传递 $event.target.value 值。

总之，以上三种方法都是Vue.js应用中父子组件之间传递数据的常用方法。需要根据具体场景进行选择。