掌控Vue2.0数据传递，点亮开发之窗

前端

2023-09-16 04:17:29

Vue 2.0 中的数据传递：掌握组件通信的艺术

简介

在构建交互式 Vue.js 应用程序时，组件通信至关重要。Vue 2.0 提供了多种数据传递方式，每种方式都有其独特的优点和适用场景。了解这些方法将帮助你创建功能强大的应用程序，在应用程序组件之间轻松地交换数据。

1. $emit：子组件到父组件

$emit 是一个自定义事件，允许子组件向其父组件传递数据。子组件触发事件，父组件监听该事件并接收数据。

使用方法：

子组件： this.$emit('my-event', data)
父组件： <child-component @my-event="handleEvent"></child-component>

// 子组件
<template>
  <button @click="emitEvent">点击我</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('my-event', '数据从子组件传递');
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component @my-event="handleEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleEvent(data) {
      console.log(data); // "数据从子组件传递"
    }
  }
}
</script>

2. v-model：双向数据绑定

v-model 提供双向数据绑定，在父组件和子组件之间同步数据。当子组件中的 v-model 数据发生变化时，父组件中的数据也会相应地更新。

使用方法：

子组件： <input v-model="message">
父组件： <child-component v-model="message"></child-component>

// 子组件
<template>
  <input v-model="message">
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component v-model="message"></child-component>
  </div>
</template>

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

3. props：父组件到子组件

props 用来传递数据从父组件到子组件。父组件在子组件的标签上设置 props，子组件通过 props 接收数据。

使用方法：

父组件： <child-component :message="message"></child-component>
子组件： <script>export default { props: ['message'] }</script>

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

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

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

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

4. slot：动态插入内容

slot 允许父组件将内容动态地插入到子组件中。父组件在子组件的标签上定义 slot，子组件使用 slot 标签接收内容。

使用方法：

父组件： <child-component><template v-slot:header><h1>标题</h1></template></child-component>
子组件： <template><slot name="header"></slot><slot name="content"></slot></template>

// 父组件
<template>
  <div>
    <child-component>
      <template v-slot:header>
        <h1>标题</h1>
      </template>
      <template v-slot:content>
        <p>内容</p>
      </template>
    </child-component>
  </div>
</template>

<script>
export default {
  components: {
    ChildComponent: {
      template: `
        <div>
          <slot name="header"></slot>
          <slot name="content"></slot>
        </div>
      `
    }
  }
}
</script>