Vue 数据传递：父组件与子组件亲密互动揭秘

2024-01-28 19:49:38

父组件向子组件传递数据：属性传递

在 Vue.js 中，父组件可以向子组件传递数据，这是组件通信最常见的方式之一。传递数据的方式是通过属性传递，即父组件在子组件标签中设置属性，子组件通过 props 选项来接收这些属性。

示例代码：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

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

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

在上面的示例中，父组件通过 :message="message" 将 message 数据传递给子组件，子组件通过 props: ['message'] 接收这个属性，并在模板中使用 {{ message }} 输出。

子组件接收数据：props

如前所述，子组件通过 props 选项来接收父组件传递的数据。props 是一个特殊的选项，它只能在子组件中使用。props 的值是一个对象，对象中的每个属性对应一个父组件传递的属性。

示例代码：

// 子组件
export default {
  props: ['message']
}

在上面的示例中，子组件通过 props: ['message'] 接收父组件传递的 message 属性。然后，子组件可以在模板中使用 {{ message }} 输出这个属性的值。

props 的讲解

类型检查： props 可以定义属性的类型，以确保父组件传递的数据类型正确。例如：

props: {
  message: {
    type: String,
    required: true
  }
}

默认值： props 可以为属性设置默认值，这样即使父组件没有传递数据，子组件也可以使用默认值。例如：

props: {
  message: {
    type: String,
    default: 'Hello from child component!'
  }
}

注意： 不要直接修改父组件传递过来的数据，可以通过在 data 中声明属性，接收父组件传递过来的内容。例如：

// 子组件
export default {
  data() {
    return {
      message: this.props.message
    }
  }
}

子组件向父组件传递数据：事件绑定

除了父组件向子组件传递数据之外，子组件也可以向父组件传递数据。这是通过事件绑定来实现的。子组件通过 $emit() 方法触发事件，父组件通过在子组件标签上绑定事件监听器来接收事件。

示例代码：

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">Send message to parent</button>
  </div>
</template>

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

<!-- 父组件 -->
<template>
  <div>
    <child-component @message="handleMessage"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // Hello from child component!
    }
  }
}
</script>

在上面的示例中，子组件通过 @click="handleClick" 绑定了一个点击事件监听器，当点击按钮时，子组件调用 $emit('message', 'Hello from child component!') 方法触发 message 事件，父组件通过 @message="handleMessage" 绑定了一个事件监听器，当子组件触发 message 事件时，父组件调用 handleMessage(message) 方法接收事件。

自定义事件

除了使用内置的事件之外，您还可以创建自定义事件。自定义事件的名称可以由您自己定义，但必须以一个字母开头。

示例代码：

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleCustomEvent">Trigger custom event</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomEvent() {
      this.$emit('custom-event', 'Hello from child component!')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomEvent(message) {
      console.log(message) // Hello from child component!
    }
  }
}
</script>

在上面的示例中，子组件通过 @click="handleCustomEvent" 绑定了一个点击事件监听器，当点击按钮时，子组件调用 $emit('custom-event', 'Hello from child component!') 方法触发 custom-event 事件，父组件通过 @custom-event="handleCustomEvent" 绑定了一个事件监听器，当子组件触发 custom-event 事件时，父组件调用 handleCustomEvent(message) 方法接收事件。

子组件向父组件传递函数

除了传递数据之外，子组件还可以向父组件传递函数。这可以通过在 props 中定义一个函数类型属性来实现。

示例代码：

// 子组件
export default {
  props: {
    handleMessage: {
      type: Function,
      required: true
    }
  }
}

// 父组件
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // Hello from child component!
    }
  },
  render() {
    return (
      <div>
        <child-component :handleMessage="handleMessage"></child-component>
      </div>
    )
  }
}

在上面的示例中，子组件通过 props: { handleMessage: { type: Function, required: true } } 定义了一个 handleMessage 属性，父组件通过 :handleMessage="handleMessage" 将 handleMessage 函数传递给子组件，子组件可以在模板中使用 {{ handleMessage }} 调用父组件传递的函数。