我们之间，缺的是一个沟通桥梁——Vue父子组件的交流方式

2023-10-20 20:26:25

爸爸传给孩子

在Vue中，父子组件通信最常见的方式是使用props。props是父组件向子组件传递数据的属性。子组件可以通过props来访问这些数据。

<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

<template>
  <div>{{ message }}</div>
</template>

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

在这个例子中，父组件将message数据传递给了子组件。子组件通过props来访问这个数据，并将其显示在模板中。

孩子传给爸爸

父子组件通信的另一种方式是使用emit。emit是子组件向父组件发送事件的一种方式。父组件可以通过监听这些事件来做出响应。

<template>
  <child-component @message="handleMessage"></child-component>
</template>

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

<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello from child!')
    }
  }
}
</script>

在这个例子中，子组件通过@message事件向父组件发送了一个message事件。父组件通过handleMessage方法来监听这个事件，并在收到事件时输出消息。

悄悄话

在某些情况下，父子组件可能需要共享数据，但又不希望对方知道具体的数据。这种情况可以使用v-model。v-model是一个双向数据绑定指令，它可以使父子组件共享数据，同时又不会暴露数据本身。

<template>
  <child-component v-model="sharedData"></child-component>
</template>

<script>
export default {
  data() {
    return {
      sharedData: 'Hello from parent!'
    }
  }
}
</script>

<template>
  <input v-model="sharedData">
</template>

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

在这个例子中，父组件通过v-model指令将sharedData数据与子组件共享。子组件通过v-model指令将sharedData数据绑定到一个输入框上。当用户在输入框中输入数据时，sharedData数据也会随之更新。

直接沟通

最后，父子组件还可以直接通过parent属性进行通信。parent属性指向父组件的实例，子组件可以通过它来访问父组件的方法和数据。

<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$refs.child.handleMessage('Hello from parent!')
    }
  }
}
</script>

<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$parent.sendMessage()
    }
  }
}
</script>