vue中，Props 和 Events 用法

提示信息

红尘笑

12月09日发表在图文创作、问答社区 / My Coding Q&A Community 阅读 253 评论 20 | 免费使用 “AI大模型GPT4.0” 提问

在 Vue 中，props 是父组件向子组件传输数据的一种方式。而 events 则是子组件通知父组件进行某些操作的机制。

Props

父组件通过 props 向子组件传递数据。这是一个单向下行的数据流动方式，从父组件向子组件。

这是一个简单的使用 props 的例子：

<!-- 子组件 -->  
<template>  
 <div>{{ message }}</div>  
</template>  
<script>  
export default {  
 props: ['message']  
}  
</script>

在父组件中使用：

<!-- 父组件 -->  
<template>  
<ChildComponent message="Hello from parent"/>  
</template>  
<script>  
import ChildComponent from './ChildComponent.vue'  
export default {  
components: {  
  ChildComponent  
}  
}  
</script>

Events

子组件可以通过自定义事件来向父组件发送消息。这通常用于子组件根据某些用户交互或者内部状态改变需要通知父组件进行某些操作。

这是一个简单的使用自定义事件的例子：

<!-- 子组件 -->  
<template>  
 <button @click="$emit('notify')">Click me</button>  
</template>

在父组件中监听这个事件：

<!-- 父组件 -->  
<template>  
 <ChildComponent @notify="handleNotify"/>  
</template>  
<script>  
import ChildComponent from './ChildComponent.vue'  
export default {  
 components: {  
  ChildComponent  
 },  
 methods: {  
   handleNotify() {  
     alert('Received notify event.');  
   }  
 }  
}  
</script>

在这个例子中，当在子组件中的按钮被点击时，它会触发一个名为 'notify' 的事件。父组件监听这个事件，并在事件被触发时执行 `handle

遇到难题？ "AI大模型GPT4.0、GPT" 是你的私人解答专家！点击按钮去提问......

红尘笑赞 | 0

最近一次登录：2024-11-20 19:00:34

暂时还没有签名，请关注我或评论我的文章

20条评论

按时间正序按时间倒序按喜欢排序

不用注册

12月18日

在 Vue 中，通过 props 和 events 进行组件间的通信是非常常见的方法，文中的示例非常清晰。

赞 0 回复举报

天涯湘草： @不用注册

在 Vue 中，使用 props 和 events 进行组件间的通信，确实是一个有效且常见的方式。想要构建高内聚、低耦合的应用，这种模式显得尤为重要。例如，通过 props 传递数据，并用 $emit 触发自定义事件，可以确保子组件与父组件之间的良好分离。

// 子组件
<template>
  <button @click="notifyParent">Click me</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('customEvent', 'Hello, Parent!');
    }
  }
}
</script>

// 父组件
<template>
  <ChildComponent @customEvent="handleEvent" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(message) {
      console.log(message); // 输出: Hello, Parent!
    }
  }
}
</script>

另外，如果希望了解更多的最佳实践，可以查阅 Vue.js 官方文档。这种方式不仅能提高代码的可维护性，还能增强组件的复用性。

6天前回复举报

添加新评论

伤口

12月19日

文中关于 props 和 events 的阐述很基础，但对于初学者是非常有帮助的，可以简化对 Vue 组件间通信的理解。

赞 0 回复举报

珂瑜： @伤口

在 Vue 的组件通信中，props 和 events 是开启良好结构的关键。虽然基础的概念很重要，进一步理解它们在实际项目中的应用更具启发性。举个例子，如果你需要在父组件和子组件之间传递数据，可以利用 props 来接收数据，同时通过 $emit 方法将事件发回父组件。

以下是一个简单的示例展示了如何实现这种模式：

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component :message="parentMessage" @childEvent="handleChildEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  },
  methods: {
    handleChildEvent(data) {
      console.log('Event from child:', data);
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendEvent">Send Event to Parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendEvent() {
      this.$emit('childEvent', 'Hello from Child!');
    }
  }
};
</script>

在这个例子中，父组件传递了一个消息给子组件，同时子组件通过事件将数据发送回父组件，这种模式充分展示了 props 和 events 的强大之处。推荐阅读 Vue.js 官方文档来深入理解这些概念及其高级用法。

11月13日回复举报

添加新评论

韦宸珲

12月23日

示例中的 props 和事件机制运用得当，可以扩展为实际应用场景。建议加入 prop 的验证示例，如：props: { message: { type: String, required: true } }。

赞 0 回复举报

昔情： @韦宸珲

对于 props 的验证，确实可以帮助提高组件的健壮性和可维护性。很高兴看到这个建议，比如在 props 中添加类型和必需性规则是一个良好的实践。您提到的示例结构相当清晰，像这样：

props: {
  message: {
    type: String,
    required: true,
    validator: function(value) {
      return value.length > 0; // 也可以添加自定义的验证逻辑
    }
  }
}

这样的验证不仅确保传入的 message 是字符串并且不能为空，还可以让开发者在使用组件时更明确地知道需要提供什么样的数据。

此外，想分享一些关于事件处理的建议，例如可以使用 $emit 来触发事件，并在父组件中监听，从而进行更复杂的交互。这样可以加强组件间的解耦和沟通。

例如：

// 子组件中
this.$emit('update-message', newMessage);

// 父组件中
<ChildComponent @update-message="handleUpdateMessage" />

在这个例子中，父组件能够接收来自子组件的消息更新，从而执行业务逻辑。

也许可以参考一些 Vue 的官方文档来进一步理解这个主题：Vue.js Props 和 Vue.js Events，会对深入掌握这些概念有所帮助。

11月12日回复举报

添加新评论

真爱你

12月27日

对于 Vue3，emits 属性也需要引入，建议扩展一下相关内容，如下：

export default {
  emits: ['notify']
}

赞 0 回复举报

红豆冰： @真爱你

对于 Vue 3 中的 emits 属性，确实是一个需要关注的重要内容。通过在组件中定义 emits，可以明确表示该组件将要发出的事件，这不仅提升了代码的可读性，还可以为使用该组件的开发者提供更好的接口文档。

例如，下面展示了一个简单的组件，它使用 emits 特性来声明一个notify事件：

<template>
  <button @click="sendNotification">Notify Parent</button>
</template>

<script>
export default {
  emits: ['notify'],
  methods: {
    sendNotification() {
      this.$emit('notify', 'This is a notification message!');
    }
  }
}
</script>

在父组件中使用这个子组件时，可以很方便地接收并处理这个事件：

<template>
  <ChildComponent @notify="handleNotification" />
</template>

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

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

使用 emits 的定义能够帮助在工程中保持一致性，并且在未来的组件维护中，快速了解和使用事件。可以参考 Vue 官方文档的 Emitting Events 了解更多细节。这样的实践对组件之间的通讯非常有帮助，有助于开发更加清晰和可维护的代码结构。

11月15日回复举报

添加新评论

本末

01月06日

清晰易懂的介绍，可以参考 Vue 官方文档获取更详细的信息，对于深入理解非常有帮助。

赞 0 回复举报

外星人： @本末

对于props和events的使用，结合官方文档的内容，实际上对Vue组件的理解非常重要。在组件间传递数据时，使用props能够让父组件以一种声明式的方法将数据传递给子组件，而子组件则可以通过this.$emit发送事件来与父组件进行交互，这种方式非常直观。

例如，可以定义一个简单的父子组件：

<!-- Parent.vue -->
<template>
  <div>
    <Child :message="parentMessage" @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  components: { Child },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  },
  methods: {
    handleChildEvent(payload) {
      console.log('Event from child:', payload);
    }
  }
}
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="emitEvent">Send Event</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    emitEvent() {
      this.$emit('childEvent', 'Hello from Child!');
    }
  }
}
</script>

以上示例展示了如何在父组件中使用props接收子组件传来的信息，同时如何通过事件与子组件进行有效的通信。参考 Vue官方文档获取更多这方面的例子，可以更深入地理解如何高效地使用组件间的通讯机制。

11月15日回复举报

添加新评论

庸人

01月16日

教程的代码示例易于理解，非常适合初学 Vue 的人，建议加入实时演示或代码沙箱链接效果更佳。

赞 0 回复举报

颓废： @庸人

在使用 Vue 的 Props 和 Events 时，能够很好地将组件之间的通讯逻辑抽象出来，确实是非常直观的。不过，对于刚接触 Vue 的人，直接上手可能会觉得有些抽象。可以尝试以下的小示例，这样在理解 Props 和 Events 时，会变得更加清晰。

<template>
  <div>
    <child-component :message="parentMessage" @sendMessage="receiveMessage"></child-component>
    <p>Received message: {{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent!',
      receivedMessage: ''
    }
  },
  methods: {
    receiveMessage(msg) {
      this.receivedMessage = msg;
    }
  }
}
</script>

在上面的例子中，父组件通过 Props 向子组件传递了一个消息，然后子组件可以通过 $emit 触发事件，将信息发送回父组件。这样的双向通讯通过 Props 和 Events 的结合实现，帮助我们清晰地理解信息的流动。

为了更好地学习和演示这些概念，可能会考虑使用像 CodeSandbox 这样的平台，创建一个动态的示例，让理解更加生动形象。通过实时执行和查看结果，学习的乐趣也会有所增加。

3天前回复举报

添加新评论

爱依然

01月27日

在目前的 Vue 项目中使用较多的是 v-model，可以通过 v-model 绑定实现父子组件之间的双向数据绑定。

赞 0 回复举报

foxworld： @爱依然

在 Vue 中，v-model 确实提供了一种简洁的方式来实现父子组件之间的双向数据绑定。通过 v-model，父组件可以很方便地获取和更新子组件的数据。下面是一个简单的示例：

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent v-model="message"/>
  </div>
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <input v-model="localMessage" @input="updateValue"/>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      localMessage: this.value
    };
  },
  methods: {
    updateValue() {
      this.$emit('input', this.localMessage);
    }
  },
  watch: {
    value(newValue) {
      this.localMessage = newValue;
    }
  }
};
</script>

在这个例子中，ChildComponent 使用 v-model 绑定了一个输入框，这样可以直接与父组件的数据进行交互。当输入框的内容变化时，子组件会通过 $emit 将新的值传递给父组件。

值得一提的是，虽然 v-model 简化了数据流动，但在某些情况下，使用明确的 props 和事件可能让数据传递变得更加清晰。创建更复杂的组件时可以考虑这种方式，有助于调试和维护。

在进一步扩展学习时，可以参考 Vue 官方文档中的相关章节：Vue.js 2.6 文档 - v-model. 这样能帮助更深入地理解数据流的机制和优化方式。

4天前回复举报

添加新评论

半夏

02月07日

很不错的介绍，对于不同生命周期下的 props 使用场景可以更详细一些，比如通过侦听器来响应 props 的变化。

赞 0 回复举报

尘世美： @半夏

关于 props 在不同生命周期下的使用，特别是通过侦听器来响应变化的做法，确实是一个很有趣且实用的主题。在 Vue 中，使用 watch 监听 props 的变化可以让我们很好地处理数据的更新逻辑。例如：

export default {
  props: {
    myProp: String
  },
  watch: {
    myProp(newValue, oldValue) {
      console.log(`myProp changed from ${oldValue} to ${newValue}`);
      // 你可以在这里执行一些操作，例如更新其他数据
    }
  }
}

在这个例子中，我们定义了一个 myProp 的监听器，当它的值发生变化时会输出更新信息。这样可以在组件中编写更复杂的逻辑，以响应 prop 的变化。

此外，可以考虑 Vue 的生命周期钩子函数，比如 created 和 mounted。在这些阶段，我们也可以根据初始的 props 值来设置一些内部状态。例如，将 props 的值赋给组件的 data：

data() {
  return {
    internalData: this.myProp
  };
},
mounted() {
  console.log('Component mounted with myProp:', this.myProp);
}

这种结合可以让我们在不同阶段灵活管理组件的状态。

有关 props 和事件的更深入使用案例，文档中的 Vue.js 官方文档提供了很多实用的信息和示例，值得参考。

5天前回复举报

添加新评论

-▲　花祭

02月10日

对于高级用法，比如使用 provide/inject 进行跨层级组件通信会更复杂一些，如果有相关补充就更全面了。

赞 0 回复举报

红颜与行者： @-▲　花祭

在使用 Vue 进行组件通信时，确实需要考虑 advanced 的方案，例如 provide/inject 机制，这对于避免组件层级过深时的 props drilling 非常有效。特别是在大型应用中，管理状态和数据流可以变得更加复杂。下面是一个简单的示例，展示了如何利用 provide/inject 实现跨层级组件的通信：

// Parent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <Child />
  </div>
</template>

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

export default {
  components: {
    Child
  },
  provide() {
    return {
      sharedData: 'This is data from the parent component'
    };
  }
};
</script>

// Child.vue
<template>
  <div>
    <h2>Child Component</h2>
    <Grandchild />
  </div>
</template>

<script>
import Grandchild from './Grandchild.vue';

export default {
  components: {
    Grandchild
  }
};
</script>

// Grandchild.vue
<template>
  <div>
    <h3>Grandchild Component</h3>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData'],
};
</script>

在这个例子中，Parent 组件通过 provide 将数据提供给整个组件树，而 Grandchild 组件则通过 inject 轻松访问这些数据。这样的模式减少了中间组件的负担，让数据传递变得更加简洁。

有关 provide/inject 的更多信息，可以参考 Vue 官方文档。这确实是一个很实用的概念，值得深入研究。

4天前回复举报

添加新评论

相濡

02月19日

能否扩展实现组件自定义事件的传递路径，让不同层级的组件都可以接受同一事件而不需要层层传递。

赞 0 回复举报

xxys： @相濡

在实现组件自定义事件传递路径的过程中，可以考虑使用 Vue 的 provide/inject 和事件总线（Event Bus）模式。这样能够让不同层级的组件方便地接收同一个事件，而无需在每一层逐级传递。

例如，可以在一个组件中使用 provide 提供一个事件处理函数，然后在任意子孙组件中使用 inject 进行注入，从而直接调用该函数。

// 父组件
export default {
  provide() {
    return {
      handleCustomEvent: this.handleCustomEvent
    };
  },
  methods: {
    handleCustomEvent() {
      console.log('Custom event triggered!');
    }
  }
};

// 子组件
export default {
  inject: ['handleCustomEvent'],
  mounted() {
    this.handleCustomEvent();
  }
}

此外，也可以使用事件总线的方式：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 触发事件
EventBus.$emit('custom-event', data);

// 监听事件
EventBus.$on('custom-event', (data) => {
  console.log(data);
});

这种方式能让我们在任意组件中监听同一事件，而不需要关心组件层级。这种模式在复杂应用中非常有用，可以减少代码的耦合。

可以参考 Vue.js 官方文档获取更多信息和实现细节。

前天回复举报

添加新评论

免费图表工具，画流程图、架构图

vue中，Props 和 Events 用法

举报评论

删除

删除后，将不可回复，确认要删除？

提示

复制代码，请先登录